动态修改HTML内容：innerHTML与textContent使用方法

本文深入解析了动态修改HTML内容时最关键的两个API——innerHTML与textContent的核心差异与使用场景：innerHTML会解析并重建DOM，适合渲染含标签的富文本，但存在XSS风险、事件丢失和性能开销；textContent则严格以纯文本方式写入，安全可靠、保留原有DOM结构且无安全隐患，是展示用户输入、代码或日志的首选；文章还明确指出innerText因兼容性差和强制触发重排而不推荐替代textContent——选对方法不仅关乎功能实现，更直接影响应用的安全性、稳定性和性能。

innerHTML 和 textContent 都能改 HTML 元素的内容，但它们的行为根本不同——选错一个，轻则 XSS 漏洞，重则 DOM 渲染异常、事件丢失、脚本不执行。

用 innerHTML 插入带标签的 HTML 字符串

当你需要把一段含 HTML 标签的字符串（比如 "加粗和
换行"）真正渲染成 DOM 节点时，必须用 innerHTML。它会解析字符串、构建新节点、替换原有子树。

• 支持标签解析：写 el.innerHTML = "

  hello

  "，浏览器真会生成

  元素

• 会销毁并重建子节点：原有绑定的事件监听器、表单输入值、自定义属性都会丢失
• 有 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 对