textcontent比innerhtml快且完全免疫xss；仅当需插入富文本html片段时才必须用innerhtml，且须经dompurify过滤。
textContent 比 innerHTML 快，且完全免疫 XSS —— 如果你只是展示文本，别用 innerHTML。
什么时候必须用 innerHTML？
只有当你要插入带格式的 HTML 片段（比如富文本编辑器输出、服务端返回的已渲染 Markdown HTML、带 class 的提示框结构）时，innerHTML 才是合理选择。它不是“不能用”，而是“不能乱用”。
- 常见误用：把用户昵称、评论内容、URL 参数值直接拼进 HTML 字符串再赋给
innerHTML - 正确做法：纯文本场景一律走
textContent；富文本场景必须先过DOMPurify.sanitize()过滤 - 注意：
innerHTML对<script></script>标签有部分限制（HTML5 规定不执行），但onerror、javascript:、<svg onload="..."></svg>等仍可触发，过滤不可省略
textContent 的性能优势在哪？
它跳过了整个 HTML 解析流程：不创建元素节点、不计算样式、不触发重排、不重建事件监听器绑定关系。浏览器只做一件事：把字符串塞进一个 TextNode。
- 实测差异：在中等复杂度容器（含 20+ 子节点）中连续更新 100 次，
textContent耗时通常为innerHTML的 1/3～1/5 - 副作用更少：不会意外清空子节点上的
data-属性或已绑定的事件（innerHTML会销毁并重建全部子树） - 兼容性够用：IE8+ 全支持；若需兼容 IE6–7，可用
el.innerText || el.textContent回退，但注意innerText会丢隐藏文本、受 CSS 影响
为什么有人还在用 innerHTML 写纯文本？
多数是习惯性写法，或误以为“模板字符串 + innerHTML”更简洁。但这种写法把安全和性能问题全打包进去了。
- 错误示例：
el.innerHTML = `<div>${userName}</div>`—— 和直接赋值用户输入无异，XSS 风险照旧 - 等效安全写法：
el.textContent = userName，再用 CSS 控制样式，无需包裹div - 如果真要加 wrapper，应拆开 DOM 操作：
el.innerHTML = ''后el.appendChild(document.createElement('div'))，但通常没必要
真正难处理的不是“该用哪个”，而是业务逻辑里混着文本和 HTML 的边界——比如一条消息里既有用户输入文本，又有系统插入的 <span class="mention">@xxx</span>。这种场景下，textContent 不够用，innerHTML 又太危险，得靠结构化数据 + 安全渲染函数兜底，而不是靠属性切换来糊弄。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
