insertAdjacentHTML 是高效 DOM 插入方法，支持 beforebegin、afterbegin、beforeend、afterend 四个位置，不重绘子树、保留事件监听器，需传合法 HTML 字符串且注意 XSS 防护。
insertAdjacentHTML 是一个直接操作 DOM 的高效方法，它允许你在指定元素的周围（而不是内部）以字符串形式插入 HTML，且不会重绘整个子树，性能优于 innerHTML + 拼接。
语法与四个插入位置
调用格式为：element.insertAdjacentHTML(position, htmlString)，其中 position 必须是以下四个字符串之一：
- 'beforebegin'：插入到该元素自身之前（同级节点，作为前一个兄弟节点）
-
'afterbegin'：插入到该元素内部最开头（等价于
element.prepend(...)） -
'beforeend'：插入到该元素内部最后（等价于
element.append(...)） - 'afterend'：插入到该元素自身之后（同级节点，作为后一个兄弟节点）
注意：position 区分大小写，必须全小写；htmlString 会被解析为 HTML，不是纯文本。
实际使用示例
假设有如下 HTML：
立即学习“Java免费学习笔记（深入）”；
执行以下代码：
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>
注意事项和常见陷阱
该方法不校验 HTML 字符串合法性，错误结构可能导致解析异常或静默失败。建议：
- 确保传入的是完整、合法的 HTML 片段（如不能只传
'<div>'，需闭合） - 若需插入用户输入内容，先做转义或改用
textContent+createElement防 XSS - 它不会返回新插入的节点，如需后续操作，应单独查询（例如用
box.nextElementSibling或选择器） - 不支持在
document或document.documentElement上使用'beforebegin'和'afterend'（会报错）
对比 innerHTML 的优势
相比 element.innerHTML += html，insertAdjacentHTML 不会破坏已有子节点的事件监听器或表单状态（比如 input 的焦点、已绑定的 click handler），因为不重新解析整个 innerHTML。例如：
const btn = document.querySelector('button');
btn.addEventListener('click', () => alert('clicked'));
// ✅ 下面这行不会让按钮丢失事件
box.insertAdjacentHTML('beforeend', '<button>新按钮</button>'); 
