innerHTML返回含标签的完整HTML字符串，innerText返回折叠空白、忽略隐藏内容的纯文本；设置时innerHTML解析标签并重建DOM，innerText原样显示文本且可能触发重排。
获取和修改 innerHTML 与 innerText 是操作 DOM 元素内容最基础也最常用的手段，但二者用途、行为和安全边界完全不同，用错容易导致显示异常、XSS 风险或语义丢失。
怎么获取 innerHTML 和 innerText
两者都通过元素对象的属性直接读取，语法一致：
-
获取 innerHTML：返回元素内部完整的 HTML 字符串（含标签、换行、空格），包括所有嵌套结构。
const html = element.innerHTML; -
获取 innerText：返回纯文本内容，浏览器会自动忽略标签、折叠空白符、隐藏不可见文本（如
display: none的内容），且不跨浏览器完全一致（非标准，IE 起源）。
例如：<div><strong>Hello</strong><br>World</div>
→ innerHTML 得到 "<strong>Hello</strong><br>World"
→ innerText 得到 "Hello World"（中间换行变为空格）。
怎么设置 innerHTML 和 innerText
赋值写法也一样，但效果差异极大：
立即学习“Java免费学习笔记（深入）”；
-
设置 innerHTML：传入字符串会被浏览器解析为 HTML，标签生效，结构重建。原有子节点全部销毁，事件监听器也会丢失。
element.innerHTML = "<p>新段落</p><span>带样式</span>"; -
设置 innerText：内容被当作纯文本处理，所有尖括号、标签名都会原样显示，不会被解析。
element.innerText = "<p>这不会变成段落</p>";→ 页面上真的显示“<p>这不会变成段落</p>”
注意：innerText 在设置时还会触发重排（reflow），性能略低于 textContent；若只需纯文本，更推荐用标准的 textContent 替代。
innerHTML 和 innerText 的关键区别
选哪个，取决于你要什么：
- 要渲染动态 HTML（如模板插入、富文本片段）→ 用
innerHTML，但务必确保内容可信，用户输入必须先转义或使用DOMPurify过滤。 - 只更新文字、避免 XSS、保持语义简洁 → 用
textContent（比innerText更标准、更快、更可预测）。 - 需要模拟用户真实“看到的文本”（比如计算可见字数、适配屏幕阅读器逻辑）→ 才考虑
innerText，但需注意兼容性与性能代价。
常见误用与建议
几个高频踩坑点：
- 用
innerHTML渲染用户评论却不做转义 → 可能执行恶意脚本。 - 用
innerText更新表单提示，结果在 Firefox 中换行异常、在 Safari 中隐藏了某些文本。 - 想清空元素内容却写
element.innerHTML = ""，其实更简洁安全的方式是element.textContent = ""。 - 对
<input>或<textarea>误用innerHTML或innerText→ 应该统一用element.value。
