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:

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

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

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

Como resultado obtendremos lo siguiente:

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

Dado un input. Dado un botón. Al hacer clic en el botón clone este input.