优先使用 element.after(newElement) 在指定节点后插入兄弟元素；兼容旧浏览器时用 parentNode.insertBefore(newDiv, target.nextSibling)。
在 JavaScript 中，要在指定节点后插入新的兄弟元素，最直接的方法是使用 insertAdjacentElement() 或结合 parentNode.insertBefore() 实现。核心在于：**不能直接用 appendChild()（它只加在末尾），也不能对目标节点本身调用 after()（需确保兼容性）**。
推荐方式：使用 element.after(newElement)
这是最简洁、语义最清晰的方式，将新元素作为指定节点的**下一个兄弟节点**插入：
- 支持现代浏览器（Chrome 54+、Firefox 49+、Edge 79+、Safari 10+），不支持 IE
-
newElement可以是新创建的元素，也可以是页面中已存在的元素（会自动移动） - 代码示例：
const target = document.getElementById('myDiv');<br> const newDiv = document.createElement('div');<br> newDiv.textContent = '我是新兄弟';<br> target.after(newDiv);
兼容旧浏览器：用 parentNode.insertBefore()
当需要支持 IE 或更广兼容性时，需手动计算插入位置：
- 关键逻辑：新元素应插在
target.nextSibling之前；如果 target 是父容器的最后一个子节点，则nextSibling为null，此时insertBefore会自动追加到末尾 - 代码示例：
const target = document.getElementById('myDiv');<br> const newDiv = document.createElement('div');<br> newDiv.textContent = '我是新兄弟';<br> target.parentNode.insertBefore(newDiv, target.nextSibling);
其他可行但需注意的方式
-
insertAdjacentElement('afterend', newElement)：效果等同于after()，语法稍冗长，兼容性略好（IE8+ 支持），但仅接受元素节点（不支持文本或 HTML 字符串） - 避免用
innerHTML拼接：会销毁原有子节点绑定的事件和状态，且有 XSS 风险 - 不要误用
append()或prepend()：它们操作的是子节点，不是兄弟节点
实际开发中，优先用 after()；若项目必须兼容 IE，就用 insertBefore + nextSibling 组合。两者逻辑一致，只是写法和兼容范围不同。
立即学习“Java免费学习笔记（深入）”；
