innerHTML用于插入或替换HTML结构，会解析标签但清空事件；textContent仅处理纯文本，自动转义、防XSS、性能高；需渲染富文本用innerHTML，仅更新文字用textContent。
用 innerHTML 可以插入或替换带 HTML 标签的内容，适合更新结构；用 textContent 只处理纯文本，安全、高效，适合显示文字内容。
用 innerHTML 修改 HTML 结构
innerHTML 会把字符串当作 HTML 解析并渲染，能新增标签、修改布局，但会清空原有子节点和绑定的事件监听器。
- 获取元素后直接赋值：
element.innerHTML = "<h3>标题</h3><p>段落</p>" - 追加内容可用拼接：
element.innerHTML += "<div>新块</div>"（注意：会重新解析全部内容，性能较低） - 清空元素只需设为空字符串：
element.innerHTML = "" - 读取当前 HTML 内容：
console.log(element.innerHTML)（含换行缩进等原始格式）
用 textContent 修改纯文本内容
textContent 忽略所有 HTML 标签，只操作文本本身，自动转义特殊字符（如 < → ），天然防 XSS，也更快更轻量。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 设置文本：
element.textContent = "用户输入：<script>alert(1)</script>"→ 页面显示原样字符串，不执行脚本 - 读取文本：
const txt = element.textContent，返回所有子文本合并后的纯文本（含隐藏元素里的文字） - 适合按钮文字、提示信息、用户评论等纯展示场景
什么时候选哪个？
关键看需求是否需要“解释 HTML”：
立即学习“前端免费学习笔记（深入）”；
- 要渲染富文本、动态生成列表、插入图标或链接 → 用
innerHTML - 只改说明文字、错误提示、用户名、计数器数字 → 用
textContent - 避免把用户输入直接塞进
innerHTML，否则可能触发 XSS；必须用时，先做 HTML 转义或用模板引擎 - 不要用
innerText替代textContent，它受 CSS 影响（比如display: none的内容读不到），且在部分浏览器中行为不一致
一个小对比示例
假设页面有：<div id="box">Hello <em>world</em></div>
-
document.getElementById("box").innerHTML→ 返回"Hello <em>world</em>" -
document.getElementById("box").textContent→ 返回"Hello world"（无标签，无样式） - 执行
element.innerHTML = "<strong>Hi</strong>"→ DOM 中出现加粗文字 - 执行
element.textContent = "<strong>Hi</strong>"→ 页面显示字面量：<strong>Hi</strong>
