textContent 是更新元素纯文本内容最直接安全的方式，自动转义 HTML 避免 XSS；innerHTML 会解析执行 HTML，存在注入风险；textContent 合并空白符、忽略注释与不可见文本，且会清空整个子节点结构。
textContent 是更新元素纯文本内容最直接、最安全的方式，它自动转义 HTML 字符，避免 XSS 风险，也跳过解析和渲染标签的过程。
为什么用 textContent 而不是 innerHTML？
innerHTML 会把字符串当作 HTML 解析并执行，如果内容来自用户输入（比如表单、URL 参数、API 响应），可能注入恶意脚本。textContent 则原样输出为纯文本，所有尖括号、引号、script 标签都会显示为字符本身。
例如：
- 设
userInput = "<script>alert('xss')</script>" -
el.innerHTML = userInput→ 页面执行脚本（危险） -
el.textContent = userInput→ 页面显示文字：<script>alert('xss')</script>（安全）
基本用法：设置和读取文本
设置文本：
立即学习“Java免费学习笔记（深入）”；
const el = document.getElementById("title");
el.textContent = "欢迎来到我的网站";
读取当前文本（不含标签，只返回所有子节点的纯文本拼接）：
console.log(el.textContent); // "欢迎来到我的网站"
注意：textContent 会合并连续空白符（如换行、缩进、多个空格）为单个空格，并忽略注释节点和不可见元素中的文本。
处理动态内容时的注意事项
若需插入变量，直接拼接即可，无需额外转义：
const name = "<script>alert(1)</script>";
el.textContent = `你好，${name}`; // 安全：显示为“你好，<script>alert(1)</script>”
但要避免混用 —— 不要先用 innerHTML 插入结构，再用 textContent 改其中某段，因为 textContent 会清空整个元素的所有子节点（包括 HTML 结构）。
常见错误写法：
el.innerHTML = "<strong>状态：</strong><span id='status'>加载中</span>";
document.getElementById("status").textContent = "<img src=x onerror=alert(1)>"; // ✅ 安全，但 span 内容被完整替换
正确思路是：对需要动态更新的最小粒度元素单独操作，保持语义清晰。
兼容性与替代方案
textContent 在所有现代浏览器（包括 IE9+）都支持。如需兼容 IE8 及更早版本，可用 innerText（但注意它受 CSS 样式影响，且行为不一致），或封装一个降级函数：
function setText(el, text) {
if ('textContent' in el) el.textContent = text;
else el.innerText = text;
}
不过当前项目基本无需考虑 IE8，直接用 textContent 即可。
