insertAdjacentHTML不是innerHTML的快捷写法，而是专为「不破坏现有DOM状态」设计的原生插入方法，可保留input值、事件监听器和textarea光标位置；其四个position参数（beforebegin、afterbegin、beforeend、afterend）均相对于调用元素自身在DOM树中的位置定义，要求目标元素已挂载且字符串合法，否则静默失败或抛DOMException。
insertAdjacentHTML 不是 innerHTML 的快捷写法，它是专为「不破坏现有 DOM 状态」设计的插入方法。只要目标元素已挂载、位置参数写对、字符串合法，就能安全追加或前置 HTML 片段，保留 input 值、事件监听器、textarea 光标位置。
四个 position 参数到底插在哪？别靠猜
它们描述的是相对于调用元素自身的 DOM 位置，不是视觉顺序，也不是父容器坐标：
-
"beforebegin"：插在目标元素自己前面（同级，要求目标已有父节点，否则静默失败） -
"afterbegin"：插进目标内部，作为第一个子节点（等价于element.prepend()） -
"beforeend"：插进目标内部，作为最后一个子节点（最常用，等价于element.append()） -
"afterend"：插在目标元素自己后面（同级，同样要求已挂载）
常见错觉："beforeend" 不是“插在元素标签末尾外面”，而是“插在它的 childNodes 最后一个之后”——也就是 <div>...</div> 的闭合标签内部结尾处。
为什么不能直接用 innerHTML += ？
每次执行 el.innerHTML += html，浏览器都要做两件事：先序列化整个子树为字符串（读取 innerHTML），再解析新字符串重建全部子节点（写入 innerHTML）。这会导致：
立即学习“前端免费学习笔记（深入）”；
- 已绑定的
addEventListener全部丢失 -
<input value="xxx">的当前值被重置为defaultValue -
<textarea>光标跳回开头 - 触发不必要的重排（reflow）
而 insertAdjacentHTML("beforeend", html) 只解析你传入的那段字符串，生成节点后直接插入，原有结构和状态毫发无损。
遇到 DOMException: Failed to execute 'insertAdjacentHTML' 怎么办？
错误本质是传入了非法 HTML 字符串，典型原因包括：
- 字符串开头含空白字符（如换行、空格），浏览器拒绝解析
- 含未转义的
&或（例如 <code>"Price: 10 & 20"应写成"Price: 10 & 20"） - 试图插入完整文档结构（含
<!DOCTYPE>、<html>、<head>） -
<script>标签用了自闭合写法<script />→ 必须写成<script></script>
若需动态拼接用户输入，别直接塞进 insertAdjacentHTML；优先用 document.createTextNode() 或模板字面量 + 手动转义关键符号。
什么时候该换用 insertAdjacentText 或 createElement？
insertAdjacentHTML 解析 HTML，有 XSS 风险且开销略高。如果你只插纯文本，用 insertAdjacentText("beforeend", text) 更快更安全；如果要插入带事件、需校验属性（比如 src 是否合法）、或要复用节点逻辑，就该走 document.createElement() + element.setAttribute() + element.appendChild() 这条路。
真正容易被忽略的点：在 <head> 或脚本顶部立即执行 document.body.insertAdjacentHTML，此时 document.body 还没创建，报 Cannot read property 'insertAdjacentHTML' of null —— 记得加 DOMContentLoaded 监听或把脚本放到底部。
