必须用innerhtml仅当插入带标签的html结构；该用textcontent时用于纯文本且需防xss、保性能。追加内容禁用+=，应选insertadjacenthtml或textcontent+=。
innerHTML 和 textContent 都能改元素内容，但选错会导致 XSS、样式丢失、隐藏文本意外暴露或性能浪费——关键看你要不要解析 HTML。
什么时候必须用 innerHTML
只有当你需要插入带标签的结构（比如按钮、列表、带样式的片段）时，innerHTML 才不可替代。
- 它会把字符串当作 HTML 解析，自动创建节点，
<strong>加粗</strong>真的会加粗 - 直接替换整个子树，原有事件监听器全部丢失（哪怕你只改一个字）
- 如果字符串来自用户输入（如表单、URL 参数），不转义就赋值，
<script>alert(1)</script>会执行 - 频繁设置大段 HTML 会触发重排重绘，比纯文本慢得多
示例：el.innerHTML = '<button onclick="doIt()">点我</button>' —— 这里 onclick 是有效绑定的，但后续所有子元素的原事件都清空了。
什么时候该用 textContent
只要内容是纯文本，或者你明确不想让浏览器解析任何标签，就用 textContent。
- 它无视 HTML 标签，
<p>hello</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>会被当作文本显示成 “hello
”，不是段落 - 保留隐藏元素（
display: none或visibility: hidden）里的文本，innerText不会 - 执行快、无 XSS 风险、不触发 DOM 重建，适合高频更新（如计数器、日志输出）
- 注意：它会把所有子节点文本拼成一行，换行符、缩进全丢，
<div>\n <span>a</span>\n <span>b</span>\n</div>的textContent是"ab"
示例：el.textContent = '用户输入：' —— 安全，且不会意外渲染成标签。
innerHTML 追加内容时别直接 +=
写 el.innerHTML += '<li>新项</li>' 看似方便，实际每次都在重新解析整个 HTML 字符串，效率差，还会销毁已有子节点上的事件和状态（比如 <input> 的焦点、滚动位置）。
- 正确做法是用
document.createElement+appendChild，或insertAdjacentHTML('beforeend', ...) -
insertAdjacentHTML支持'beforebegin'、'afterbegin'、'beforeend'、'afterend'四种位置，只解析新增部分 - 如果只是追加文本，
el.textContent += '新文字'更轻量，不涉及 HTML 解析
示例：el.insertAdjacentHTML('beforeend', '<li>动态添加</li>') —— 比 += 安全且快。
容易被忽略的兼容性与边界行为
textContent 在所有现代浏览器中行为一致；innerHTML 虽然也广泛支持，但某些边缘情况仍需留意：
-
script和style标签设入innerHTML后，内容不会执行或生效（除非手动调用eval或插入<link>） - 表格元素（
<table>、<code><tr>）不能直接用 <code>innerHTML设置子元素，必须通过insertRow/insertCell或包裹在合法结构里（如<tbody><tr>...</tr></tbody>） -
textContent对<script></script>、<style></style>元素返回的是其内部原始文本（含注释），而innerHTML返回的是经过浏览器规范化后的字符串（可能删掉注释、标准化空格）
真正难处理的不是“怎么写”，而是“改完之后，原来绑的事件还在不在、输入框光标跑哪去了、隐藏区域的文本要不要同步”——这些细节不验证，上线后才踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
