insertAdjacentHTML 是一个高效 DOM 插入方法，支持 beforebegin、afterbegin、beforeend、afterend 四种位置，直接解析 HTML 字符串为节点插入，不破坏原结构、不触发重排重绘，且保留事件监听器和用户状态。
insertAdjacentHTML 是一个非常实用的 DOM 方法，它能在不破坏原有结构、不触发重排重绘的前提下，把 HTML 字符串精准插入到目标元素的指定相对位置。
四个可选位置参数：beforebegin、afterbegin、beforeend、afterend
它接收两个参数：第一个是表示插入位置的字符串（必须是以下四个之一），第二个是要插入的 HTML 字符串。
- beforebegin：插入到目标元素自身之前（即目标元素的父元素中，位于目标元素前面）
- afterbegin：插入到目标元素内部开头（即目标元素的第一个子节点之前）
- beforeend：插入到目标元素内部末尾（即目标元素的最后一个子节点之后）
- afterend：插入到目标元素自身之后（即目标元素的父元素中，位于目标元素后面）
对比 innerHTML 和 append/appendChild 的关键优势
不同于 innerHTML += ...（会销毁并重建所有子节点，丢失事件监听器和用户输入状态），也不同于 append()（只接受 Node 或字符串，且字符串会被当作纯文本处理），insertAdjacentHTML 直接解析 HTML 字符串并插入为真实 DOM 节点，同时保留原结构和绑定逻辑。
- 插入的 HTML 中的
<script></script>标签默认不会执行（安全机制），如需执行需手动调用eval或动态创建 script 元素 - 支持插入多个节点（只要 HTML 字符串合法，比如
"<div>A</div> <div>B</div>"） - 不触发目标元素及其子节点的重新渲染，性能更优
实际使用示例
假设有如下 HTML：
立即学习“Java免费学习笔记（深入）”；
<div id="box">
<p>第一段</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10962" title="Java 接口排错助手"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Java 接口排错助手" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10962" title="Java 接口排错助手">Java 接口排错助手</a>
<p>在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。</p>
</div>
<a href="/xiazai/skill10962" title="Java 接口排错助手" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
执行以下操作：
-
document.getElementById('box').insertAdjacentHTML('beforebegin', '<h2>标题</h2>');→ 在<div id="box"> 外部上方插入 <li> <code>document.getElementById('box').insertAdjacentHTML('afterbegin', '<span>开头内容</span>');→ 插入后变为：<div> <span>开头内容</span><p>第一段</p> </div> -
document.getElementById('box').insertAdjacentHTML('beforeend', '<hr>');→ 在<p></p>后面插入<hr> -
document.getElementById('box').insertAdjacentHTML('afterend', '<footer>页脚</footer>');→ 在
