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

【问题标题】：How copying elements without deleting originals?如何在不删除原件的情况下复制元素？
【发布时间】：2021-12-03 05:52:24
【问题描述】：

我有一个循环来复制一个数组，另一个循环在另一个 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>

【问题讨论】：

原始元素没有被删除，你只是让它发生在你的DOM中的另一个地方

标签： javascript arrays loops copy appendchild

【解决方案1】：

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

mesElementsCopie[j] = mesElements[j];

您应该使用cloneNode() 方法：

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

【讨论】：

谢谢它有效！

【解决方案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) 确保您没有使用相同的元素。

【讨论】：