js实现insertafter

实现 insertAfter 方法

在 JavaScript 中，DOM 操作没有内置的 insertAfter 方法，但可以通过组合现有方法实现。以下是两种常见实现方式：

方法一：使用 insertBefore 和 nextSibling

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

方法二：处理末尾节点情况

function insertAfter(newNode, referenceNode) {
    const parent = referenceNode.parentNode;
    const nextSibling = referenceNode.nextSibling;

    if (nextSibling) {
        parent.insertBefore(newNode, nextSibling);
    } else {
        parent.appendChild(newNode);
    }
}

使用示例

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

<script>
    const container = document.getElementById('container');
    const reference = document.getElementById('second');
    const newNode = document.createElement('div');
    newNode.textContent = 'New element';
    newNode.id = 'new';

    insertAfter(newNode, reference);
</script>

注意事项

• 确保 referenceNode 有父节点，否则会抛出错误
• 如果 referenceNode 是最后一个子节点，新节点会被追加到末尾
• 现代浏览器中可以使用 Element.after() 方法，但兼容性需要考虑

兼容性解决方案

对于需要支持旧浏览器的项目，可以扩展 Node.prototype：

if (!Node.prototype.insertAfter) {
    Node.prototype.insertAfter = function(newNode, referenceNode) {
        this.insertBefore(newNode, referenceNode.nextSibling);
    };
}

这样就能像原生方法一样使用：

document.getElementById('container').insertAfter(newNode, referenceNode);