insertadjacenthtml比innerhtml更高效，因其仅解析新字符串并精准插入，不序列化重建原有dom，避免事件丢失、表单状态重置及重排重绘；支持beforebegin、afterbegin、beforeend、afterend四个明确位置参数。
用 insertAdjacentHTML 比直接改 innerHTML 更高效，关键在于它不破坏原有 DOM 结构、不重排重绘整个子树，也不影响已绑定的事件监听器或表单状态（比如输入框光标位置、选中值等）。
insertAdjacentHTML 的四个插入位置很明确
它接受两个参数：位置字符串和要插入的 HTML 字符串。位置只能是以下四个之一：
- 'beforebegin'：插入到元素自身之前（同级）
- 'afterbegin'：插入到元素内部最开头（作为第一个子节点）
-
'beforeend'：插入到元素内部最后面（作为最后一个子节点）——最常用，类似
append() - 'afterend'：插入到元素自身之后（同级）
例如：el.insertAdjacentHTML('beforeend', '<div>新内容</div>') 就是在 el 内部末尾追加，不会清空已有子节点。
为什么比 innerHTML += 更安全高效
innerHTML += html 看似简洁，实则会触发三步操作：读取当前 HTML 字符串 → 拼接新字符串 → 全量解析并重建整个子 DOM 树。这会导致：
- 已有的事件监听器全部丢失（除非用事件委托）
- input/textarea 的焦点、选区、滚动位置被重置
- 自定义元素或 Web Components 可能重新初始化
- 性能随子节点数量增长而明显下降
而 insertAdjacentHTML 只解析并插入你传入的那一小段 HTML，其余 DOM 节点完全不动，开销固定且可控。
实际使用时的小技巧
它不返回任何值（void），也不需要手动创建或 append 节点，写法干净：
- 追加内容：
listEl.insertAdjacentHTML('beforeend', '<li>新项</li>') - 前置插入：
headerEl.insertAdjacentHTML('afterbegin', '<span class="badge">NEW</span>') - 批量插入？可先拼好字符串再调一次，避免多次解析（比循环调用更优）
- 注意 XSS：和
innerHTML一样，它不自动转义，传入动态内容前务必过滤或使用textContent替代
替代方案对比：insertAdjacentElement vs insertAdjacentHTML
如果已有现成的 DOM 节点（比如用 document.createElement 创建的），可用 insertAdjacentElement，它只移动节点，零解析开销，更快更纯粹。但大多数场景下，拼 HTML 字符串再用 insertAdjacentHTML 更直观、代码更紧凑。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
