insertAdjacentHTML是最常用且稳妥的DOM插入方法，支持beforebegin、afterbegin、beforeend、afterend四个位置，不破坏现有结构，但需手动转义用户输入防XSS。
insertAdjacentHTML 是 DOM 元素上一个非常精准、高效且不破坏现有事件绑定的插入方法。它不重新解析整个元素内容，只把 HTML 字符串解析后插入到指定位置，因此比 innerHTML += ... 安全、稳定得多。
四个合法位置参数：beforebegin、afterbegin、beforeend、afterend
该方法接收两个参数：position（字符串）和 text（HTML 字符串）。position 必须是以下四个值之一，区分大小写：
- beforebegin：插入到目标元素自身之前（即作为其父元素的前一个兄弟节点）
-
afterbegin：插入到目标元素内部，作为其第一个子节点（等价于
prepend()） -
beforeend：插入到目标元素内部，作为其最后一个子节点（等价于
append()或传统innerHTML +=的效果，但更安全） - afterend：插入到目标元素自身之后（即作为其父元素的后一个兄弟节点）
实际用法示例与注意事项
假设有如下 HTML：
<div id="box"><p>原始内容</p></div>你可以这样操作：
立即学习“Java免费学习笔记（深入）”；
-
document.getElementById('box').insertAdjacentHTML('beforebegin', '<h2>标题</h2>');→ 在<div id="box">外部上方插入 -
document.getElementById('box').insertAdjacentHTML('afterbegin', '<span>开头追加</span>');→ 插入到<div>内部最前面，成为第一个子节点 -
document.getElementById('box').insertAdjacentHTML('beforeend', '<hr>');→ 插入到<div>内部最后面，紧接在<p>后 -
document.getElementById('box').insertAdjacentHTML('afterend', '<p>后面内容</p>');→ 在</div>闭合标签之后插入
⚠️ 注意：如果传入非法 position（如 'top' 或大小写错误），会直接抛出 SyntaxError；HTML 字符串中若有脚本标签（<script>），默认不会执行——这是它的安全特性之一。
和 innerHTML += ... 的关键区别
很多人习惯用 el.innerHTML += htmlString，但这有严重隐患：
- 会完整重写整个
innerHTML，导致所有已绑定的事件监听器丢失（即使没动对应子元素） - 可能意外清空用户输入（如
<input>的 value 值或<textarea>的内容） - 性能较差，尤其对大结构反复拼接时
insertAdjacentHTML 只新增节点，不触碰已有子树，原生事件监听器、表单状态、焦点等全部保留。
配合模板字符串动态插入更实用
现代写法常结合模板字符串提升可读性：
const name = '小明';const age = 25;
el.insertAdjacentHTML('beforeend', `
注意：仍需确保变量内容已做 HTML 转义（如用 textContent 替代或手动转义），避免 XSS。若内容来自用户，建议先创建文本节点或使用 DOMPurify 等库净化。
