insertAdjacentHTML是高效插入HTML字符串的原生方法，支持beforebegin、afterbegin、beforeend、afterend四个位置参数，只解析新内容、不破坏现有节点状态，比innerHTML+=更安全高效。
insertAdjacentHTML 是原生 JavaScript 中插入 HTML 字符串最直接、高效的方式之一，它不触发完整 DOM 重排（reparse），也不影响现有节点引用，比 innerHTML += 或 appendChild + DOMParser 更轻量。
支持的四个插入位置（必须用字符串字面量）
该方法接收两个参数：position（位置标识）和 text（HTML 字符串）。position 只能是以下四个值之一：
- 'beforebegin'：插入到目标元素自身之前（同级）
- 'afterbegin'：插入到目标元素内部开头（第一个子节点前）
-
'beforeend'：插入到目标元素内部结尾（最后一个子节点后）——等价于
append() - 'afterend'：插入到目标元素自身之后（同级）
⚠️ 注意：位置字符串大小写敏感，且不能传变量或拼接字符串（如 'before' + 'end' 会报错）。
为什么比 innerHTML += 更高效？
innerHTML += html 实际上会先读取整个 innerHTML（触发序列化）、再拼接、再重新解析并重建全部子节点，导致原有子节点绑定的事件丢失、输入框状态清空、焦点丢失等问题。
立即学习“前端免费学习笔记（深入）”；
而 insertAdjacentHTML 只解析传入的那段 HTML 字符串，原地插入对应节点，不影响已有 DOM 结构和状态。例如：
const container = document.getElementById('list');
container.insertAdjacentHTML('beforeend', '<li>新项</li>');
// ✅ 安全、快速、不干扰已有 <li> 的事件监听器或表单值
常用场景与实用技巧
-
动态列表追加：用
'beforeend'替代innerHTML +=，避免重绘开销 -
插入模板片段：配合
<template></template>或字符串模板，插入结构化内容（注意 XSS 风险，确保来源可信） -
批量插入优化：若需插入多个节点，建议先拼成一个字符串再调用一次
insertAdjacentHTML，而不是循环多次调用 -
替代 prepend/append 的简洁写法：
el.insertAdjacentHTML('afterbegin', html)等效于el.prepend(...)，但兼容性更好（IE8+）
兼容性与注意事项
支持所有现代浏览器及 IE8+，无 polyfill 必要。但需注意：
- 插入的 HTML 字符串中 script 标签不会执行（安全机制）
- 不校验 HTML 合法性，错误语法可能导致解析失败或部分渲染
- 若插入含 id 或 name 的元素，需确保不与页面其他元素冲突
- 服务端渲染或富文本场景下，务必对用户输入做转义或使用 DOMPurify 过滤
