用textcontent读写纯文本，安全、快、无视样式；用innerhtml处理可信html。textcontent适用于纯文本场景，自动转义防xss；innerhtml若插入不可信内容会触发xss攻击，需过滤或改用textcontent。
直接说结论：用 textContent 读写纯文本，安全、快、无视样式；用 innerHTML 插入或提取带标签的 HTML，但必须确保内容可信，否则会触发 XSS。
什么时候该用 textContent 而不是 innerHTML
当你只关心「用户看到的/可复制的纯文字」，且不希望执行任何 HTML —— 比如填充表单提示、渲染日志、更新状态文案、做无障碍文本同步。它不会解析 <script></script>、<style></style> 或隐藏元素（display: none）里的文本，但会照常返回它们的内容。
- ✅ 安全：赋值时自动转义，
el.textContent = '<img src="x" onerror="alert(1)">'只显示字面量，不执行 - ✅ 快：不触发 HTML 解析、样式计算或回流
- ✅ 稳定：跨浏览器行为一致，无兼容性陷阱
- ❌ 不能插入换行、粗体等格式 —— 它只认字符，不认标签
为什么 innerHTML 写错就容易被 XSS 攻击
因为 innerHTML 把字符串当 HTML 解析并执行。如果把用户输入、URL 参数、API 返回的未过滤数据直接赋给 innerHTML，攻击者就能注入脚本。
- 危险示例：
el.innerHTML = '<div>' + userInput + '</div>'，若userInput是'<img src="x" onerror='fetch("/steal?cookie="+document.cookie)'>'，就完了 - 修复方式只有两种：要么用
textContent替代（如果不需要 HTML），要么用 DOMPurify 等库白名单过滤后再塞进innerHTML - 注意：
innerHTML赋值还会销毁原有事件监听器，即使新内容结构相同
textContent 会保留换行和空格，但不是你想要的“格式化”
textContent 确实保留源码中的空白符（包括换行、制表符、连续空格），但它**不产生视觉换行**—— 浏览器默认折叠空白，最终显示仍是一行。它不是 <br> 的替代品。
- 比如
<p>Hello<span>\nWorld</span></p>，p.textContent返回"Hello\nWorld"（含换行符），但渲染出来仍是 “HelloWorld” 连在一起 - 若需真实换行效果，得配合 CSS：
white-space: pre-line或手动加<br>—— 但后者就得切回innerHTML，代价是重审安全性 - 别依赖
textContent做“富文本预览”，它不还原语义，<h2>标题</h2>和<span>标题</span>输出完全一样
一个容易被忽略的性能细节：隐藏元素不影响 textContent，但影响 innerText
虽然问题没问 innerText，但它常被误当作 textContent 的“更友好版”。实际上：innerText 会跳过 display: none、visibility: hidden 元素的文本，还会因读取布局触发强制同步回流（layout thrashing），而 textContent 完全不看样式、不查布局。
- 高频操作（如滚动中更新文本）务必用
textContent，否则卡顿明显 -
innerText在 IE 早期有兼容问题，现在虽可用，但没必要 —— 除非你明确需要“仅可见文本”这个语义 - 记住：
textContent是 DOM 标准属性，innerText是 IE 遗留产物，行为在各浏览器仍有细微差异
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
