HTML中如何使用insertAdjacentHTML插入HTML片段-html教程-PHP中文网

insertadjacenthtml的四个参数按dom结构定义：“beforebegin”插目标前同级，“afterbegin”插目标内首子，“beforeend”插目标内末子，“afterend”插目标后同级；不执行脚本、不触发事件，需手动处理。

html中如何使用insertadjacenthtml插入html片段

insertAdjacentHTML 的四个位置参数怎么选

关键看你想把新 HTML 插到目标元素的哪个相对位置："beforebegin"、"afterbegin"、"beforeend"、"afterend"。它们不是“上下左右”，而是严格按 DOM 树结构定义的：

"beforebegin"：插在目标元素自身前面（同级，父元素的子节点列表中靠前）
"afterbegin"：插进目标元素内部，作为它的第一个子节点（等价于 element.prepend()）
"beforeend"：插进目标元素内部，作为它的最后一个子节点（等价于 element.append()）
"afterend"：插在目标元素自身后面（同级，父元素的子节点列表中靠后）

记不住？直接查 MDN 的 DOM 结构图——它只认父子/兄弟关系，不认视觉位置。

插入含脚本或事件的 HTML 会自动执行吗

不会。这是很多人误以为“动态插入就等于运行”的坑点。insertAdjacentHTML 只解析并插入 HTML 字符串，生成对应 DOM 节点，但不会执行其中的 <script></script> 标签，也不会触发 DOMContentLoaded 或重新绑定事件监听器。

如果 HTML 片段里有 <script src="..."></script>，它会被插入但不会加载执行
内联 <script>console.log(1)</script> 同样被忽略（现代浏览器默认行为）
已绑定的事件监听器（比如用 addEventListener 绑定的）不会自动应用到新插入的按钮上——得手动调用或用事件委托

需要执行逻辑？要么把脚本逻辑抽出来单独调用，要么用 eval（不推荐）或动态创建 script 元素并显式 append()。

和 innerHTML、append 的性能与安全差异

insertAdjacentHTML 不会重写整个元素内容，只做局部插入，所以比反复赋值 innerHTML += ... 更高效，也避免了已存在子节点的销毁重建。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

相比 innerHTML：不破坏已有节点引用，不重置表单状态（如 <input> 的 value、focus 状态）
相比 append() / prepend()：能直接插入 HTML 字符串，不用先用 DOMParser 或 template 解析；但失去类型安全，容易 XSS
安全红线：永远不要把用户输入直接拼进字符串传给 insertAdjacentHTML；必须先转义（如用 textContent 创建临时元素取 innerText）或用模板引擎预处理

示例安全写法：

const safeText = document.createElement('div');<br>safeText.textContent = userInput;<br>target.insertAdjacentHTML('beforeend', `<p>${safeText.innerHTML}</p>`);

IE11 兼容性及常见报错

IE11 支持 insertAdjacentHTML，但有两个经典问题：

传入非法位置字符串（比如写成 "begin" 或 "end"）时，IE11 报 Invalid argument.，而 Chrome/Safari 静默失败或抛 SyntaxError
在 <table> 内部直接对 <code><tr> 使用 <code>"beforeend" 插入 <td> 会失败——IE 对表格元素的插入位置限制更死，必须用 <code>insertRow/insertCell
若目标元素没有父节点（比如刚用 document.createElement 创建还未挂载），所有位置都会失败，报 NotFoundError