直接用 fetch + innerHTML 插入 HTML 片段不执行 script、不加载样式、不绑定事件，需手动处理脚本执行与事件重绑；insertAdjacentHTML 更可控但同样不执行脚本；动态插入含不可信内容时存在 XSS 风险。
直接用 fetch + innerHTML 是最常用、也最容易出问题的组合——它能跑通，但不等于安全或健壮。
fetch 加载 HTML 片段后写入 innerHTML 会丢样式和脚本
很多人以为 fetch('partial.html').then(r => r.text()).then(html => el.innerHTML = html) 就完事了，其实这行代码只做了三件事：拉文本、解析成 DOM、插入。但原始 HTML 中的 <style></style> 标签不会生效，<script></script> 标签默认不执行（除非手动 eval 或 appendChild），连 defer 属性都无效。
- 如果片段里有内联
style或link rel="stylesheet"，浏览器不会自动加载或应用 - 片段里的
<script src="xxx"></script>不会触发下载，<script>console.log(1)</script>也不会运行 - 若目标元素是
<div id="content"></div>，插入后所有子节点的事件监听器需重新绑定
insertAdjacentHTML 比 innerHTML 更可控，但依然不执行脚本
insertAdjacentHTML 的优势在于位置精准（'beforeend'、'afterbegin' 等），且不破坏已有节点结构。但它和 innerHTML 一样，只是“字符串→DOM 节点”的单向转换，不触发脚本执行，也不解析外部资源。
- 推荐用于纯结构插入，比如动态加一行表格、一个卡片容器
- 若插入内容含
onclick内联事件，会被解析并绑定；但外部<script></script>仍静默 - 注意 XSS 风险：只要来源不可信，就别用它插用户输入的 HTML 字符串
需要执行脚本？得手动提取并 eval 或 appendChild
原生 DOM 不会帮你执行插入 HTML 中的 <script></script>。真要支持，得自己遍历新插入的节点，找出 script 元素，再分别处理：
立即学习“Java免费学习笔记（深入）”；
- 对内联
<script>alert(1)</script>：取textContent，用eval()（仅限可信上下文）或封装进函数调用 - 对外部
<script src="a.js"></script>：创建新script元素，设src，再document.head.appendChild() - 注意：重复插入同个
src的脚本不会二次执行，但内联脚本每次都会重跑
静态环境没 fetch？试试 <script src="data.js"></script> 方案
某些嵌入式看板、纯静态部署或老旧 IE 场景下，fetch 不可用，XMLHttpRequest 又嫌重。这时可以把 HTML 内容“伪装”成 JS 变量，用 <script src="content.js"></script> 加载：
-
content.js内容必须是合法 JS 赋值语句，如pageHtml = '<p>Hello</p>';（不能带const） - HTML 中必须先声明目标容器（如
<p id="target"></p>），再加载脚本，否则querySelector找不到元素 - 赋值后用
textContent渲染最安全；若确需 HTML，确保内容完全可控，避免 XSS
真正麻烦的从来不是“怎么插入”，而是“插入之后谁来管那些没被触发的脚本、没被加载的样式、没被绑定的事件”。别让 innerHTML 成为技术债的起点。
