innerhtml用于插入或替换html结构，会解析标签但清空事件；textcontent仅处理纯文本，自动转义、防xss、性能高；需渲染富文本用innerhtml，仅更新文字用textcontent。
用 innerHTML 可以插入或替换带 HTML 标签的内容，适合更新结构；用 textContent 只处理纯文本，安全、高效，适合显示文字内容。
用 innerHTML 修改 HTML 结构
innerHTML 会把字符串当作 HTML 解析并渲染，能新增标签、修改布局，但会清空原有子节点和绑定的事件监听器。
- 获取元素后直接赋值：
element.innerHTML = "<h3>标题</h3> <p>段落</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>" - 追加内容可用拼接：
element.innerHTML += "<div>新块</div>"（注意：会重新解析全部内容，性能较低） - 清空元素只需设为空字符串：
element.innerHTML = "" - 读取当前 HTML 内容：
console.log(element.innerHTML)（含换行缩进等原始格式）
用 textContent 修改纯文本内容
textContent 忽略所有 HTML 标签，只操作文本本身，自动转义特殊字符（如 → <code><），天然防 XSS，也更快更轻量。
- 设置文本：
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>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
