javascript中dom节点前后插入的核心方法是insertbefore()、insertadjacentelement()和insertadjacenthtml()；前者需指定父节点和参考节点，后两者直接作用于目标元素，支持beforebegin、afterend等位置参数，且insertadjacenthtml可安全插入html字符串。
JavaScript 中 DOM 节点的前后插入，核心靠的是 insertBefore()、insertAdjacentElement()、insertAdjacentHTML() 这几个方法，而不是直接用 appendChild() 或 prepend() —— 后两者只能插在开头或末尾。
在某个节点前面插入（before）
想把新节点插到目标节点的前面（即成为它的前一个兄弟节点），最常用的是：
-
parentNode.insertBefore(newNode, referenceNode)：必须指定父节点，然后把newNode插到referenceNode前面。如果referenceNode是父节点的第一个子节点，那新节点就变成第一个；如果referenceNode为null，则等效于appendChild（插到最后）。 -
element.insertAdjacentElement('beforebegin', newNode)：不需要找父节点，直接对目标元素调用。'beforebegin'表示插在该元素自身之前（同级位置），前提是该元素有父节点。
在某个节点后面插入（after）
原生 DOM 没有直接叫 insertAfter() 的方法，但有等效方案：
-
parentNode.insertBefore(newNode, referenceNode.nextSibling)：利用nextSibling获取后一个兄弟节点，再用insertBefore插到它前面——实际效果就是插在referenceNode后面。 -
element.insertAdjacentElement('afterend', newNode)：更简洁，'afterend'表示插在该元素自身之后（同级），同样要求元素有父节点。
插入 HTML 字符串（非节点对象）
如果要插入的是 HTML 字符串（比如 '<div>hello</div>'），推荐用 insertAdjacentHTML()：
-
el.insertAdjacentHTML('beforebegin', htmlStr)→ 插在元素前面 -
el.insertAdjacentHTML('afterend', htmlStr)→ 插在元素后面 -
el.insertAdjacentHTML('beforeend', htmlStr)→ 插在元素内部末尾（类似append()） -
el.insertAdjacentHTML('afterbegin', htmlStr)→ 插在元素内部开头（类似prepend()）
注意：insertAdjacentHTML 会解析字符串并插入 DOM，不执行脚本标签，相对安全；但需确保字符串格式合法，否则静默失败。
兼容性与现代写法提醒
insertAdjacentElement 和 insertAdjacentHTML 在所有现代浏览器（包括 IE8+）都支持，比手动操作 parentNode 更直观。如果项目需兼容极老环境（如 IE7），才需回退到 insertBefore + nextSibling 组合。
另外，before() 和 after() 方法（如 el.before(newEl)）是较新的 API，目前主流浏览器支持良好，但 IE 完全不支持，使用前建议检查兼容性或用 polyfill。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
