textContent比innerHTML更安全，因其将用户输入视为纯文本而非HTML代码，自动转义特殊字符，避免解析执行脚本，有效防御XSS；它保留换行与空白符，配合white-space CSS可正确显示格式，且不受CSS影响、性能稳定，是W3C推荐的纯文本写入方案。
用 textContent 输出用户输入的纯文本，本质是**避免 HTML 解析、防止 XSS**。它不会把字符串当 HTML 渲染，而是原样显示为文本内容，这是最简单有效的防御手段之一。
为什么 textContent 比 innerHTML 更安全
textContent 把任何字符串都当作纯字符处理，浏览器不会解析其中的标签或脚本。比如用户输入：<script>alert(1)</script>，用 textContent 设置后，页面上就真的只显示这串文字，而不是弹窗。
而 innerHTML 会把这段字符串当作 HTML 解析执行，存在严重 XSS 风险。
正确设置 textContent 的写法
直接赋值即可，不需要额外转义（textContent 自动处理）：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
-
✅ 正确：
element.textContent = userInput; -
❌ 错误：
element.innerHTML = userInput;（除非你明确信任并已过滤该内容） -
❌ 不必要：
element.textContent = escapeHtml(userInput);（重复转义，反而可能显示多余符号）
注意边界情况：换行和空白符
textContent 会保留原始字符串中的换行符（\n）、制表符等，但 HTML 默认不渲染换行。如果希望用户输入的换行在页面上显示为换行，需配合 CSS：
- 加样式：
white-space: pre-line;或white-space: pre-wrap; - 例如：
<div style="white-space: pre-line;" id="output"></div> - 再执行：
document.getElementById('output').textContent = '第一行\n第二行';
与其他方式对比：innerText vs textContent
innerText 受 CSS 样式影响（如 display: none 的内容不计入），且会触发重排，行为不稳定；textContent 是 DOM 标准属性，只读取/设置节点的文本内容，不受样式干扰，性能更好，兼容性也足够（IE9+）。
所以优先选 textContent，不用 innerText 做安全输出。
