如何复制DOM元素且不删除原始元素？JS操作DOM异常求解

DOM 元素在整个文档树中是唯一的实例，appendChild() 方法的特性是：如果传入的节点已经存在于当前文档的DOM树中，该方法会先将这个节点从原位置移除，再插入到新的指定位置。
你写的第一个循环只是将原有DOM元素的引用拷贝到了数组中，并没有生成新的DOM元素实例，所以第二个循环执行插入操作时，实际是把原位置的元素直接移动到了.parent_copy容器中，原位置自然就看不到元素了。

如果你需要保留原有位置的元素，要先调用DOM元素的cloneNode()方法生成节点副本，再将副本插入到新容器中。cloneNode()可以传入布尔值参数：

• 传入true表示深拷贝，会连同当前节点的所有子节点、文本内容一同复制
• 传入false表示浅拷贝，仅复制当前节点本身，不包含子内容

修复后的代码如下：

var mesElements = document.querySelectorAll('.element');
var catchCopy = document.querySelector('.parent_copy');

for(var k = 0; k < mesElements.length; ++k){
    // 生成元素的深拷贝副本
    var copiedEle = mesElements[k].cloneNode(true);
    catchCopy.appendChild(copiedEle);
}

注意：cloneNode()不会拷贝原元素上通过addEventListener()绑定的事件监听器，如果需要保留事件，需要在拷贝完成后给新元素重新绑定对应事件。

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