innerhtml解析并渲染html，textcontent仅写入纯文本且防xss；前者适合结构化内容，后者适合安全高效的纯文本展示。
直接用 innerHTML 写入 HTML 字符串，用 textContent 写入纯文本字符串——这是最核心的区别。前者会解析并渲染标签，后者只当普通字符处理，不执行、不渲染任何 HTML。
innerHTML：写入并解析 HTML 结构
设置 innerHTML 时，浏览器会将字符串当作 HTML 源码解析，重建 DOM 子树。原有子节点全部被替换，新结构立即生效。
- 适合动态插入带格式的内容，比如按钮、列表、富文本片段
- 写入含
<script></script>或<img onerror="...">等可执行代码时存在 XSS 风险，必须确保内容可信或提前过滤转义 - 会触发重排（reflow）和重绘（repaint），频繁操作影响性能
- 表单元素的当前值（如
<input>.value）会被重置，因为整个子树被替换了
示例：document.getElementById('box').innerHTML = '<p>新段落</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2530" title="Java JDK 25"><img
src="https://img.php.cn/upload/manual/001/221/864/6a6091217fc2f681.png" alt="Java JDK 25" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2530" title="Java JDK 25" class="overflowclass">Java JDK 25</a>
<p class="overflowclass">Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2530" title="Java JDK 25" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<button>点击</button>';
结果：DOM 中出现一个 p 和一个 button 元素。
textContent：写入纯文本，安全且轻量
设置 textContent 会清空元素所有子节点，仅插入一个文本节点，原始字符串中的尖括号、引号等全部按字面显示，不解析、不执行。
- 天然防 XSS，适合展示用户输入、错误提示、状态文案等纯文本场景
- 不触发重排，性能优于 innerHTML；保留空格、换行符，空白敏感时更可控
- 不会影响表单控件的
value值，也不会清空textarea的用户输入 - 返回值包含所有后代文本，包括
<style></style>和<script></script>内的原始内容（即使不可见）
示例：document.getElementById('status').textContent = '完成：共 12 条';
结果：<div id="status">完成：共 12 条</div>，原先的 span 被完全移除。
别误用 innerText 替代 textContent
innerText 行为依赖 CSS 渲染状态，比如 display: none 或 visibility: hidden 的内容不会被计入；还会自动合并空白、折叠换行，模拟“用户复制粘贴”的效果。它不是 textContent 的兼容补丁，而是语义不同的属性。
- 现代开发中，若只需写纯文本，优先选
textContent - 除非明确需要模拟用户可见文本（例如做无障碍摘要或截图前内容提取），否则不要用
innerText - IE8 及更早版本不支持
textContent，但目前已无实际兼容压力
怎么选：看内容性质和安全性要求
用 innerHTML 当你需要结构化输出——比如从模板生成卡片、渲染 Markdown 转义后的 HTML、插入图标 SVG 片段。
用 textContent 当你只输出一句话、一个数字、一段提示——比如表单校验信息、计数器文案、API 返回的状态描述。
- 不确定内容来源？一律用
textContent - 要插链接或强调文字？先用
textContent设基础文本，再用createElement+appendChild安全构建结构 - 批量更新多个文本节点？
textContent批量赋值比反复操作 innerHTML 更高效稳定
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
