insertadjacenthtml的四个位置参数按dom语义选择：“beforebegin”插目标元素前（同级），“afterbegin”插其首子节点前（内部开头），“beforeend”插其末子节点后（内部结尾，最常用），“afterend”插目标元素后（同级）。
insertAdjacentHTML 的四个位置参数怎么选
位置参数决定 HTML 字符串插到目标元素的哪儿，不是“相对坐标”，而是固定语义位置："beforebegin"、"afterbegin"、"beforeend"、"afterend"。别记混顺序——它按 DOM 树上下文命名，不是按从左到右阅读顺序。
常见误用是把 "afterbegin" 当成“插入到开头之后”，其实它等价于 element.firstChild 前面；而 "beforeend" 插在 element.lastChild 后面，也就是内容末尾（类似 append()），不是整个元素末尾。
-
"beforebegin"：插在目标元素自身之前（父元素中，目标元素节点的前面） -
"afterbegin"：插在目标元素起始标签内部、第一个子节点之前（即 innerHTML 开头） -
"beforeend"：插在目标元素结束标签内部、最后一个子节点之后（即 innerHTML 末尾） -
"afterend"：插在目标元素自身之后（父元素中，目标元素节点的后面）
为什么 insertAdjacentHTML 比 innerHTML += 更安全
直接拼接 innerHTML += htmlString 会强制重新解析整个元素内容，已绑定的事件监听器、表单输入值、焦点状态全丢，还可能触发不必要的重排。
insertAdjacentHTML 只解析并插入新字符串部分，不碰原有子节点，DOM 结构增量更新，性能和行为都更可控。
- 原生
input的当前值、textarea光标位置不受影响 - 已用
addEventListener绑定的事件不会被清空 - 对包含
canvas、iframe或 Web Component 的容器更友好
遇到“InvalidCharacterError”或解析失败怎么办
错误信息通常是 DOMException: Failed to execute 'insertAdjacentHTML' on 'Element': The string did not match the expected pattern.，本质是传入了非法 HTML 字符串——最常见的是顶部多了空白字符、含未转义的 & 或 ，或字符串以 <code><script></script> 开头但没闭合。
- 确保字符串是纯 HTML 片段，不能是带外层 DOCTYPE 或
的完整文档 - 避免直接拼接用户输入；如需动态内容，先用
document.createTextNode()或模板字面量转义关键符号 - 若必须插入含脚本逻辑的 HTML，
<script></script>标签需有结束标签（<script>...</script>），自闭合写法（<script></script>）会被忽略
和 insertAdjacentElement、insertAdjacentText 的关系
三者 API 形式一致，只差一个参数类型：insertAdjacentHTML 接字符串，insertAdjacentElement 接 Element 实例，insertAdjacentText 接纯文本字符串。它们不互相替代，选哪个取决于你手头有什么。
- 已有现成
div元素？用insertAdjacentElement("beforeend", el) - 只想插入一段不可执行的纯文本（比如防止 XSS）？用
insertAdjacentText("beforeend", text) - 要插入带结构的动态片段且不怕解析开销？
insertAdjacentHTML是唯一选择 - 注意：
insertAdjacentElement不支持 DocumentFragment，如需批量插入，得先 append 到 fragment 再用append()或replaceChildren()
"beforebegin" 和 "afterend" 在元素无父节点时会静默失败，不报错也不生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
