js实现insertafter

实现 insertAfter 方法

在原生 JavaScript 中，DOM 操作没有直接提供 insertAfter 方法，但可以通过组合现有方法实现。以下是两种常见实现方式：

使用 insertBefore 和 nextSibling

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

原理：通过获取参考节点的父节点，利用 insertBefore 方法，将新节点插入到参考节点的下一个兄弟节点之前。

完整 DOM 元素检测版本

function insertAfter(newNode, referenceNode) {
    if (!referenceNode || !newNode) return;
    const parent = referenceNode.parentNode;
    if (!parent) return;
    const next = referenceNode.nextSibling;
    parent.insertBefore(newNode, next);
}

这个版本增加了空值检测，避免操作未定义的节点。

使用示例

<div id="container">
    <div id="first">First</div>
    <div id="third">Third</div>
</div>

<script>
    const container = document.getElementById('container');
    const first = document.getElementById('first');
    const newNode = document.createElement('div');
    newNode.textContent = 'Second';
    newNode.id = 'second';

    insertAfter(newNode, first);
</script>

执行后 DOM 结构将变为：

<div id="container">
    <div id="first">First</div>
    <div id="second">Second</div>
    <div id="third">Third</div>
</div>

注意事项

• 如果参考节点是最后一个子节点，nextSibling 会返回 null，insertBefore 在这种情况下会自动将节点追加到末尾
• 该方法也适用于文本节点、注释节点等所有节点类型
• 现代浏览器中可以考虑使用 after() 方法：referenceNode.after(newNode)，但需要注意兼容性（IE 不支持）