textcontent 是设置纯文本最安全的方式，因其不解析 html，自动防止 xss；仅在必须用 innerhtml 时才需手动转义，可用临时元素实现 escapehtml。
Element.setTextContent 方法并不存在于标准 Web API 中，这是个常见误解。实际开发中，应使用原生 Node.textContent 或 Element.innerText 设置纯文本内容，它们天然不解析 HTML，自动规避 XSS 风险——这本身就是对特殊字符（如 、<code>&、"）最安全的“转义”方式。
为什么不需要手动转义：textContent 的本质是“防解析”
textContent 把赋值内容当作纯字符串写入 DOM，浏览器不会将其作为 HTML 解析。例如：
- 执行
el.textContent = "1 4"→ 页面显示完整字符串1 4，而非被当成标签或实体处理； - 即使内容含
<script>alert(1)</script>，也只显示为文字，绝不会执行； - 它不关心你写的是
<还是—— 全部按字面量呈现，无需预先 HTML 编码。
什么时候才需要显式 HTML 实体转义？
仅当你**必须使用 innerHTML 插入内容**，又想让其中的特殊字符“显示出来”而非“起作用”时，才需提前转义。此时应自行实现或调用工具函数：
- 简单方案：用临时元素借力转义：
function escapeHtml(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; }
调用escapeHtml("A & B 返回 <code>"A & B ； - 注意：这不是 setTextContent 的功能，而是为 innerHTML 安全赋值做的预处理；
- 切勿对已用 textContent 设置的内容再做 HTML 转义——那会把
变成 <code><，导致页面显示<而非。
实战对比：正确写法 vs 危险写法
假设变量 userInput = 'Alice <script>alert("xss")</script> says "Hi"'：
- ✅ 安全（推荐）：
el.textContent = userInput;
→ 页面显示原文，无执行、无解析、无转义烦恼； - ❌ 危险（禁止）：
el.innerHTML = userInput;
→ 脚本被执行，严重 XSS 漏洞； - ⚠️ 勉强可用（仅限必须用 HTML 场景）：
el.innerHTML = escapeHtml(userInput);
→ 显示：Alice <script>alert("xss")</script> says "Hi"。
补充：innerText 与 textContent 的细微差别
两者都避免 HTML 解析，但行为略有不同：
-
textContent：返回所有文本节点内容（含隐藏元素、
style/script标签内），性能高，适合数据提取和设置； -
innerText：仅返回“渲染后可见”的文本（受 CSS
display:none等影响），会触发重排，语义更贴近用户所见，但性能稍低； - 日常修改文本内容，优先用
textContent，它更可靠、更快、更符合“纯文本”预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
