innerHTML解析HTML并重建DOM，有XSS风险；textContent纯文本写入，安全且保留结构；innerText不推荐替代textContent，因兼容性差且触发重排。
innerHTML 和 textContent 都能改 HTML 元素的内容，但它们的行为根本不同——选错一个，轻则 XSS 漏洞，重则 DOM 渲染异常、事件丢失、脚本不执行。
用 innerHTML 插入带标签的 HTML 字符串
当你需要把一段含 HTML 标签的字符串（比如
"<strong>加粗</strong>和<br>换行"）真正渲染成 DOM 节点时，必须用
innerHTML。它会解析字符串、构建新节点、替换原有子树。
- 支持标签解析：写
el.innerHTML = "<p>hello</p>"，浏览器真会生成<p>元素 - 会销毁并重建子节点：原有绑定的事件监听器、表单输入值、自定义属性都会丢失
- 有 XSS 风险：如果内容来自用户输入或后端未过滤数据，直接赋值可能执行恶意脚本
- 性能开销略大：每次赋值都触发 HTML 解析 + DOM 重建
示例：
立即学习“前端免费学习笔记（深入）”；
const div = document.getElementById("box");
div.innerHTML = "<span class='highlight'>动态插入</span>"; // ✅ 渲染为带 class 的 span
用 textContent 纯文本写入，不解析 HTML
当你只想要“显示这段文字”，且明确不希望任何标签被解释（比如展示代码片段、用户评论、日志输出），就该用 textContent。它把所有字符当纯文本处理，<、& 等符号会被自动转义。
- 绝对安全：不会触发脚本、不会创建新标签、无 XSS 风险
- 保留原有 DOM 结构：不破坏子节点、不丢失事件监听器、不重置表单状态
- 性能更好：只是设置文本节点内容，无解析开销
- 注意空格与换行：
textContent会严格保留源字符串中的空白符（包括换行、缩进）
示例：
立即学习“前端免费学习笔记（深入）”；
const pre = document.querySelector("pre.code");
pre.textContent = "<div onclick='alert(1)'>危险代码</div>"; // ✅ 显示为纯文本，不执行
别用 innerText 替代 textContent 做“安全写入”
innerText 看起来像“带样式的文本”，但它不是 textContent 的安全替代品——它受 CSS 影响（比如 display: none 的元素内容不计入）、会折叠空白、在不同浏览器中行为不一致，且仍可能意外触发 layout 计算。
-
innerText不保证跨浏览器一致性，尤其在表格、contenteditable场景下容易出错 - 它会触发重排（reflow），而
textContent不会 - 若目标是“防止 HTML 解析”，唯一可靠选择是
textContent - 若需兼容 IE8 及更早版本（极少见），才考虑
innerText回退逻辑
动态更新时，优先考虑 textContent，仅在必要时用 innerHTML
很多场景你以为需要 innerHTML，其实用 textContent 更稳。比如更新用户昵称、错误提示、计数器数字、API 返回的描述字段——只要不含可信 HTML，一律用 textContent。
- 后端返回富文本？先校验/白名单过滤，再用
innerHTML；否则默认走textContent - 想局部更新某段 HTML？考虑用
document.createElement+appendChild，比拼接字符串再赋innerHTML更可控 - 频繁更新同一区域？避免反复设
innerHTML，可缓存 fragment 或用虚拟 DOM 类库
最常被忽略的一点：textContent 对 <script>、<style> 等特殊元素无效（它们用 text 属性），这点容易在动态加载内联脚本时踩坑。
