推荐用textContent改纯文本（防XSS），innerHTML改可信HTML结构，innerText因兼容性差且受CSS影响应少用；insertAdjacentHTML可精准插入HTML而不覆盖原有内容。

修改元素的文本内容和 HTML 片段，主要靠 textContent、innerText 和 innerHTML 这三个属性，它们用途不同，选错容易出问题。

用 textContent 改纯文本内容（推荐用于安全场景）

textContent 只处理纯文本，会忽略所有 HTML 标签，也不会触发脚本执行，适合展示用户输入或防止 XSS。

• 设置文本：element.textContent = "Hello <strong>World</strong>"; → 页面显示完整字符串，不解析标签
• 读取时也只返回纯文本，连样式换行、空格都会按实际 DOM 结构返回（包括隐藏元素的内容）
• 兼容性好，IE9+ 都支持

用 innerHTML 改带格式的 HTML 片段（注意安全）

innerHTML 会解析并渲染 HTML 字符串，适合动态插入结构，但必须确保内容可信，否则有 XSS 风险。

• 插入带标签的内容：element.innerHTML = "Hello <strong>World</strong>"; → “World” 会加粗显示
• 可替换整个子节点结构，比如清空再重写：div.innerHTML = "<p>新段落</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a> <p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p> <ul><li>列表项</li></ul>";
• 避免直接拼接用户输入：div.innerHTML = "<span>" + userInput + "</span>"; ❌ 危险！应先转义或用 textContent 替代

innerText 和 textContent 的区别（少用，慎用）

innerText 按渲染效果返回文本（会忽略隐藏元素、合并空白、受 CSS 影响），且 IE 专属行为多，现代开发中一般不用。

• 它会响应 display: none 或 visibility: hidden，而 textContent 不会
• 在 Firefox 中曾长期不支持，现在虽已支持，但行为仍不如 textContent 稳定
• 除非明确需要“视觉上看到的文本”，否则优先选 textContent

补充：用 insertAdjacentHTML 精准插入 HTML（更灵活）

如果不想覆盖整个 innerHTML，而是想在开头、结尾、前面或后面插入 HTML，用 insertAdjacentHTML 更安全可控。

• el.insertAdjacentHTML("beforebegin", "<p>插在自己前面</p>");
• el.insertAdjacentHTML("afterend", "<p>插在自己后面</p>");
• el.insertAdjacentHTML("beforeend", "<li>追加到子元素末尾</li>");（类似 append()）
• el.insertAdjacentHTML("afterbegin", "<li>插在子元素开头</li>");

不复杂但容易忽略细节：改文本优先用 textContent，改结构才用 innerHTML 或 insertAdjacentHTML，并始终对不可信数据做处理。