如何在不删除原件的情况下复制元素？

Question

我有一个循环来复制一个数组，另一个循环用来在另一个 div 中添加副本。两个循环都工作正常但原始元素被删除，有人可以解释我为什么吗？我该如何解决？谢谢！

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

var mesElementsCopie = []
for(var j = 0; j < mesElements.length; ++j){
    mesElementsCopie[j] = mesElements[j];
}
for(var k = 0; k < mesElements.length; ++k){
    catchCopy.appendChild(mesElementsCopie[k]);
}

<div class="parent_element" style="background-color: red;">
    <div class="element">text</div>
    <div class="element">text</div>
    <div class="element">text</div>
</div>
<div class="parent_copy" style="background-color: green;"></div>

Answer 1

在这一行中，您不复制节点，而是创建对同一 DOM 节点的两个引用：

mesElementsCopie[j] = mesElements[j];

您应该使用 cloneNode() 方法：

mesElementsCopie[j] = mesElements[j].cloneNode(true);

Answer 2

固定代码如下：

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

var mesElementsCopie = []
for(var j = 0; j < mesElements.length; ++j){
    mesElementsCopie[j] = mesElements[j].cloneNode(true);
}
for(var k = 0; k < mesElements.length; ++k){
    catchCopy.appendChild(mesElementsCopie[k]);
}

<div class="parent_element" style="background-color: red;">
    <div class="element">text</div>
    <div class="element">text</div>
    <div class="element">text</div>
</div>
<div class="parent_copy" style="background-color: green;"></div>

您正在添加从父元素中获取的相同元素，因此只是将它们移动到父副本。使用 .cloneNode(true) 确保您使用的不是同一元素。

如何在不删除原件的情况下复制元素？

How copying elements without deleting originals?

javascript

arrays

loops

copy

appendchild