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

elemento.cloneNode(true o false);

Ejemplo

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

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

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

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

Resultado de ejecutar el código:

<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:

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

let 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:

<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

método createElement,
que permite crear un nuevo elemento