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()：
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
-
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。
