insertAdjacentElement 是真实存在的 DOM API，但仅支持较新浏览器（Chrome 86+、Firefox 79+、Safari 15.4+），用于插入现成 DOM 节点；推荐优先使用 appendChild、insertBefore、before/after 等兼容性更佳的方法。
insertAdjacentElement 不能直接插入现成的 DOM 对象，它只接受字符串 HTML 片段（通过 insertAdjacentHTML），或用于插入新创建的元素（需配合 document.createElement 等）。真正适合“插入现成 DOM 节点”的方法是 insertBefore、appendChild、after/before（现代 API）——而 insertAdjacentElement 实际上并不存在。
先澄清：没有 insertAdjacentElement 这个方法
DOM 规范中只有以下三个 insertAdjacent* 方法：
-
element.insertAdjacentHTML(position, htmlString)—— 插入 HTML 字符串 -
element.insertAdjacentText(position, text)—— 插入纯文本 -
element.insertAdjacentElement(position, element)—— ✅ 这个方法是真实存在的，但仅在较新浏览器中支持（Chrome 86+、Firefox 79+、Safari 15.4+），且兼容性仍需谨慎对待
也就是说：insertAdjacentElement 是真实 API，但不是“全浏览器可用”的成熟方案。若需高效率插入现成节点，优先推荐更稳定、更通用的方法。
高效插入现成 DOM 节点的推荐方式
假设你已有一个现成的 DOM 元素 el（比如通过 document.getElementById 或 document.createElement 创建并配置好），想把它插入到目标容器的指定位置：
立即学习“Java免费学习笔记（深入）”；
-
插到目标元素内部末尾：用
parent.appendChild(el)—— 最快，无重排开销 -
插到目标元素内部开头：用
parent.insertBefore(el, parent.firstChild) -
插到目标元素之后（同级）：用
target.after(el)（现代写法，简洁） -
插到目标元素之前（同级）：用
target.before(el) -
插到目标元素内部指定位置（如第2个子节点前）：用
parent.insertBefore(el, parent.children[1])
如果坚持用 insertAdjacentElement（需兼容性兜底）
该方法签名是：target.insertAdjacentElement(position, element)，其中 position 可选值为：
-
'beforebegin'→ 插入到target自身之前（同级） -
'afterbegin'→ 插入到target内部第一个子节点前 -
'beforeend'→ 插入到target内部最后一个子节点后（等价于appendChild） -
'afterend'→ 插入到target自身之后（同级）
✅ 示例：
const container = document.querySelector('#box');
const existingEl = document.querySelector('#item');
container.insertAdjacentElement('beforeend', existingEl); // 把 #item 移动到 #box 末尾
⚠️ 注意：这会把 existingEl 从原位置移走（不是克隆），相当于“剪切粘贴”。如果要保留原节点，得先 existingEl.cloneNode(true)。
性能与注意事项
DOM 插入操作本身开销很小，真正影响效率的是：
- 频繁触发重排/重绘：避免在循环中多次插入；可批量操作（如用
DocumentFragment中转） - 跨文档节点：不能插入来自其他
document的节点（会报错），需先adoptNode - 事件监听器保留在移动的节点上：
insertAdjacentElement或before/after不会丢失绑定的事件 - 兼容性建议：生产环境如需支持 IE 或旧版 Safari，必须降级使用
insertBefore+parentNode判断逻辑
