insertAdjacentHTML 是高效安全插入 HTML 字符串的方法，支持 beforebegin、afterbegin、beforeend、afterend 四种位置，不破坏事件监听器且不重新解析容器。
insertAdjacentHTML 是一个高效、安全且无需手动创建节点即可在指定位置插入 HTML 字符串的方法。它直接解析字符串并插入 DOM，比 innerHTML + appendChild 组合更精准、更轻量。
四个可选插入位置（关键参数）
该方法接收两个参数：position（字符串）和 text（HTML 字符串）。position 必须是以下之一：
- 'beforebegin'：插入到目标元素自身之前（同级前）
- 'afterbegin'：插入到目标元素内部，作为第一个子节点
-
'beforeend'：插入到目标元素内部，作为最后一个子节点（等价于
append()） - 'afterend'：插入到目标元素自身之后（同级后）
⚠️ 注意：beforebegin 和 afterend 要求目标元素已存在于 DOM 中（即有父节点），否则静默失败。
实际用法示例
假设有如下 HTML：
立即学习“Java免费学习笔记（深入）”；
<div id="box"><p>原始内容</p></div>执行以下代码：
const box = document.getElementById('box');
box.insertAdjacentHTML('beforebegin', '<h2>标题在上面</h2>');
box.insertAdjacentHTML('afterbegin', '<span>开头插入</span>');
box.insertAdjacentHTML('beforeend', '<span>结尾插入</span>');
box.insertAdjacentHTML('afterend', '<p>后面新加段落</p>');
结果 DOM 变为：
<h2>标题在上面</h2><div id="box">
<span>开头插入</span>
<p>原始内容</p>
<span>结尾插入</span>
</div>
<p>后面新加段落</p>
与 innerHTML / append 的关键区别
- 不破坏原有子节点事件监听器 ——
insertAdjacentHTML只新增，不影响已有节点结构和绑定 - 不重新解析整个容器 —— 比给
innerHTML += ...安全，避免 XSS 风险和状态丢失（如 input 的 value、focus 状态） - 比
element.insertAdjacentElement()更快捷 —— 适合插入简单 HTML 片段，无需先创建元素对象 - 不返回新节点 —— 如需引用插入的内容，得用其他方式查询（例如用 class 或 data 属性定位）
注意事项和避坑点
- 插入的 HTML 字符串必须语法正确，否则整个插入失败（控制台报错，但不影响后续脚本）
- 脚本标签（
<script>）不会自动执行 —— 这是安全设计，如需运行需手动提取并eval（不推荐）或动态创建 script 元素 - 若插入含表单控件（如
<input>），其初始值按 HTML 设置，但不会继承父表单的提交行为，需自行处理 - 在循环中频繁调用时，建议批量拼接 HTML 字符串再一次性插入，减少重排重绘
