js实现insertafter

在JavaScript中，insertAfter是一个常见的DOM操作方法，用于在指定元素之后插入新节点。以下是几种实现方式：

使用原生JavaScript实现

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

这个方法通过获取参考节点的父节点，并利用insertBefore方法结合nextSibling属性实现插入。

使用现代DOM API（ChildNode.after）

现代浏览器支持ChildNode.after()方法，可以直接在参考节点后插入新节点：

referenceNode.after(newNode);

处理不存在nextSibling的情况

如果需要处理参考节点是最后一个子节点的情况：

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

封装为jQuery插件

如果使用jQuery，可以扩展一个insertAfter方法：

$.fn.insertAfter = function(target) {
    this.each(function() {
        target.after(this);
    });
    return this;
};

注意事项

• 确保参考节点存在于DOM中。
• 新节点可以是单个节点或文档片段。
• 现代浏览器推荐直接使用after()方法。

这些方法覆盖了从原生JavaScript到现代API的实现，可根据项目需求选择合适的方式。