Método cloneNode

El método cloneNode permite clonar un elemento y obtener su copia exacta. Esta copia luego se puede insertar en la página con la ayuda de los métodos prepend, append, appendChild, insertBefore o insertAdjacentElement.

El método recibe como parámetro true o false. Si se pasa true, el elemento se clona completamente, con todos sus atributos y elementos hijos, y si es false - solo el elemento mismo (sin elementos hijos).

Sintaxis

javascriptelemento.cloneNode(true o false);

Ejemplo

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

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

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

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

Resultado de ejecutar el código:

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

Ejemplo

Se puede trabajar con el clon obtenido como con un elemento normal:

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'nuevo texto1';
clone.children[1].textContent = 'nuevo texto2';

parent.appendChild(clone);

Resultado de ejecutar el código:

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
  <div class="elem">
    <p>nuevo texto1</p>
    <p>nuevo texto2</p>
  </div>
</div>

Véase también