如何修改JS克隆节点代码将克隆节点插入原节点正后方

解决方法 #

你只需要修改clonarid函数中的节点插入逻辑即可：

1. 找到原有代码里的original.parentNode.appendChild(clone);这一行
2. 将其替换为original.parentNode.insertBefore(clone, original.nextSibling);

修改后的完整函数示例：

var i = 0;
function clonarid(elid){
    var original = document.getElementById(elid);
    var clone = original.cloneNode(true);
    clone.id = elid + ++i;
    // 替换原appendChild逻辑
    original.parentNode.insertBefore(clone, original.nextSibling);
}

实现原理 #

Node.insertBefore()是DOM节点的原生方法，作用是在父节点的指定参照节点前插入新节点。这里传入original.nextSibling（原节点的下一个兄弟节点）作为参照，克隆节点就会刚好插入到原节点的正后方。如果原节点已经是父节点的最后一个子元素，original.nextSibling会返回null，此时insertBefore的表现和appendChild完全一致，不会出现兼容问题。

内容的提问来源于stack exchange，提问作者Stackoverflow