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：
原始内容
你可以这样操作：
-
document.getElementById('box').insertAdjacentHTML('beforebegin', '<h2>标题</h2>');→ 在<div id="box"> 外部上方插入 <li> <code>document.getElementById('box').insertAdjacentHTML('afterbegin', '<span>开头追加</span>');→ 插入到<div> 内部最前面，成为第一个子节点 <li> <code>document.getElementById('box').insertAdjacentHTML('beforeend', '<hr>');→ 插入到<div> 内部最后面，紧接在 <code><p></p>后 -
document.getElementById('box').insertAdjacentHTML('afterend', '<p>后面内容</p>');→ 在
