在JavaScript中，向指定节点后插入新兄弟节点推荐用insertAdjacentElement('afterend')，语义清晰且简洁；兼容旧浏览器则用parentNode.insertBefore(newNode, referenceNode.nextSibling)，自动处理末尾插入。
在 JavaScript 中，要在指定节点后面插入新兄弟节点，最直接的方法是使用 insertAdjacentElement 或结合 parentNode.insertBefore 实现。核心思路是：找到目标节点的父元素，再确定“它后面”的位置（即它的下一个兄弟节点），然后把新节点插到那个位置之前。
用 insertAdjacentElement（推荐，简洁）
这是最直观的方式，支持 'afterend' 位置参数，表示“插入到该元素结束标签之后”，也就是作为它的后一个兄弟节点：
targetNode.insertAdjacentElement('afterend', newElement)-
targetNode.insertAdjacentHTML('afterend', '<div>新内容</div>')（插入 HTML 字符串） targetNode.insertAdjacentText('afterend', '纯文本')
✅ 优点：语义清晰、无需手动找父节点或 nextSibling；❌ 注意：IE 不支持（但现代项目基本不需兼容 IE）。
用 parentNode.insertBefore（兼容性最好）
如果需要支持老旧浏览器，或想更明确控制插入逻辑，可以这样写：
立即学习“Java免费学习笔记（深入）”；
- 先获取目标节点的
parentNode - 获取它的
nextSibling（即它后面的兄弟节点） - 调用
parentNode.insertBefore(newElement, nextSibling)
如果目标节点是最后一个子节点，nextSibling 为 null，此时 insertBefore 会自动追加到末尾，行为安全。
示例：
const target = document.getElementById('item-2');
const newDiv = document.createElement('div');
newDiv.textContent = '我是新兄弟';
target.parentNode.insertBefore(newDiv, target.nextSibling);
常见误区提醒
-
别用
appendChild：它只能加到最后，不是“指定节点后面” -
别混淆
after()和insertAdjacentElement：两者都可行，但after()是 Element 方法（也支持多个参数），同样不兼容 IE：target.after(newElement) -
注意节点类型：插入的必须是 Node 对象（如 Element、Text），不能直接传字符串（除非用
insertAdjacentHTML或after()配合innerHTML创建）
补充：一行函数封装（实用）
可封装成复用函数，增强可读性：
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
// 使用：
insertAfter(document.querySelector('#btn'), newBtn);
