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

Question

I have a loop to duplicate an array, and another to add copy in another div. Both loop work good but original element are deleted, someone can explain me why? And how can i fixe it? Thank you!

 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

On this line, you do not copy the node, but rather you create two references to the same DOM node:

mesElementsCopie[j] = mesElements[j];

You should use thecloneNode() method:

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

Answer 2

Here's the fixed code:

 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>

You were adding the same elements you had grabbed from the parent element, so it was just moving them to the parent copy. Use .cloneNode(true) to make sure you're not using the same element.