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

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