Tengo un ciclo para duplicar una matriz y otro para agregar una copia en otro div. Ambos bucles funcionan bien, pero se eliminan los elementos originales, ¿alguien puede explicarme por qué? ¿Y cómo puedo arreglarlo? ¡Gracias!
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>En esta línea, no copia el nodo, sino que crea dos referencias al mismo nodo DOM:
mesElementsCopie[j] = mesElements[j];Deberías usar el métodocloneNode() :
mesElementsCopie[j] = mesElements[j].cloneNode(true);Aquí está el código fijo:
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> Estaba agregando los mismos elementos que había tomado del elemento principal, por lo que solo los estaba moviendo a la copia principal. Use .cloneNode(true) para asegurarse de que no está usando el mismo elemento.