Clonación de elementos en JavaScript

En esta lección aprenderemos a obtener copias de elementos. Con estas copias podremos trabajar, como con elementos normales - modificarlos y insertarlos en el lugar deseado de la página. El proceso de obtención de copias de elementos se llama clonación.

Se puede clonar un elemento usando el método cloneNode. A este método hay que pasarle como parámetro true o false. Si se pasa true, el elemento se clona completamente, junto con todos los atributos y elementos hijos, y si es false - solo el elemento mismo.

Veamos un ejemplo. Supongamos que tenemos el siguiente código:

html<div id="parent">
  <div class="elem">
    <p>primer párrafo</p>
    <p>segundo párrafo</p>
  </div>
</div>

Hagamos una copia del bloque con la clase elem e insertémoslo al final del bloque #parent:

javascriptlet parent = document.querySelector('#parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
parent.appendChild(clone);

Como resultado obtendremos lo siguiente:

html<div id="parent">
  <div class="elem">
    <p>primer párrafo</p>
    <p>segundo párrafo</p>
  </div>
  <div class="elem">
    <p>primer párrafo</p>
    <p>segundo párrafo</p>
  </div>
</div>