优先用 insertAdjacentHTML 控制插入位置，防 XSS 且保结构、事件和逻辑；不可信内容须经 DOMPurify 等净化；脚本需手动提取执行；纯文本场景直接用 textContent。
接口返回的 HTML 片段不能直接拼接或用 innerHTML 赋值了事，关键在“安全”和“可控”两个维度：既要防 XSS，又要保结构、不丢事件、不破坏现有逻辑。
优先用 insertAdjacentHTML 控制插入位置
这是最推荐的默认方案。它不重绘整个容器，不触发重新解析，也不会清空已有子节点或移除已绑定的事件监听器。
- 四个位置参数必须写对：
beforebegin（元素前）、afterbegin（内部开头）、beforeend（内部结尾）、afterend（元素后） - 例如：
el.insertAdjacentHTML('beforeend', htmlStr)等效于追加子元素，比el.innerHTML += htmlStr更稳定 - 注意：传错位置字符串（如
'top'或大小写错误）会直接抛SyntaxError
不可信内容必须先净化再插入
如果 HTML 来自用户输入或第三方接口，不能跳过过滤。浏览器不会帮你拦截恶意脚本，<script> 标签虽不自动执行，但 onerror、javascript: 伪协议等仍可触发 XSS。
- 轻量项目可用
DOMParser+ 白名单提取：解析后只取body.children，再用textContent提取文本，或手动遍历节点剔除非允许标签 - 生产环境建议引入
DOMPurify库：const clean = DOMPurify.sanitize(dirtyHtml)，配置严格策略后插入 - 避免自己写正则清洗 HTML——规则复杂，极易遗漏边界情况
需要执行其中脚本时要手动提取并注入
通过 insertAdjacentHTML 或 innerHTML 插入的 <script> 标签默认不运行，这是浏览器的安全限制。
立即学习“Java免费学习笔记（深入）”；
- 先用
DOMParser解析返回的 HTML 字符串，得到文档对象 - 遍历所有
script节点，对每个节点创建新<script>元素，复制src、type、textContent等属性 - 用
document.head.appendChild(newScript)或插入到目标容器附近，并确保不重复加载同一 URL - 内联脚本建议改用函数调用方式，而非依赖自动执行，更可控也更易调试
纯文本展示场景直接用 textContent
如果接口返回的是带格式的 HTML（比如富文本编辑器内容），但你只需要显示文字本身（如摘要、提示、日志），根本不需要解析成 DOM。
- 直接赋值：
el.textContent = htmlString，所有标签符号（<、>、&）都会原样显示，无 XSS 风险 - 比任何 HTML 解析都快，且完全规避渲染开销和安全校验逻辑
- 仅当明确需要保留链接、加粗、换行等语义时，才进入 HTML 处理流程
