dom节点插入分同级与内部：同级前用before()/insertbefore()，后用after()/insertbefore(..., nextsibling)；内部用prepend()/append()/appendchild()；html字符串用insertadjacenthtml()各位置参数。
想把一个 DOM 节点插到指定元素的前面或后面，关键看“同级插入”还是“内部插入”，以及你手头是现成节点还是 HTML 字符串。现代浏览器支持简洁方法，老版本需兼容写法。
插到指定元素前面（同级）
就是让新节点和目标元素并列，且排在它左边（文档流中更早位置）：
-
现代写法（推荐）：直接用
target.before(newEl)—— 简洁、语义清晰，newEl 必须是 Node 实例（如 document.createElement 创建的） -
兼容写法：用
target.parentNode.insertBefore(newEl, target)—— 所有浏览器都支持，需要确保 target 有父节点 - 注意：
beforebegin是 insertAdjacentElement 的位置参数，效果等同于before()，但语法稍冗长
插到指定元素后面（同级）
新节点与目标元素同级，排在它右边（文档流中更晚位置）：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
-
现代写法（推荐）：用
target.after(newEl)—— 和 before() 对称，同样要求 newEl 是真实节点 -
兼容写法：用
target.parentNode.insertBefore(newEl, target.nextSibling)—— 如果 target 是最后一个子节点，nextSibling 为 null，此时 insertBefore 会自动追加到末尾，行为安全 - 避免用
insertAfter—— 它不是原生方法，必须自己封装或依赖 polyfill
插到指定元素内部开头或末尾
如果目标是往元素里面塞，而不是并列放：
- 开头：用
target.prepend(newEl)（现代）或target.insertBefore(newEl, target.firstChild)（兼容） - 末尾：用
target.append(newEl)（现代）或target.appendChild(newEl)（最老但最稳） - 这两个场景不适用 before/after，因为它们操作的是子内容层级，不是同级关系
已有 HTML 字符串？用 insertAdjacentHTML
如果你手里是一段 HTML 字符串（比如 '<div>hello</div>'），而不是现成节点，就别硬转成 Element：
- 插到前面（同级）：
target.insertAdjacentHTML('beforebegin', htmlStr) - 插到后面（同级）：
target.insertAdjacentHTML('afterend', htmlStr) - 插到内部开头：
target.insertAdjacentHTML('afterbegin', htmlStr) - 插到内部末尾：
target.insertAdjacentHTML('beforeend', htmlStr) - 优势：不破坏原有结构、不丢失事件、不重置表单状态，比 innerHTML += 高效安全得多
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
