Clonagem de elementos em JavaScript

Nesta lição, aprenderemos a obter cópias de elementos. Essas cópias poderão ser manipuladas como elementos comuns - alterando-os e inserindo-os no local desejado da página. O processo de obtenção de cópias de elementos é chamado de clonagem.

Um elemento pode ser clonado usando o método cloneNode. Este método deve receber true ou false como parâmetro. Se for passado true, o elemento é clonado completamente, junto com todos os atributos e elementos filhos, e se for false - apenas o próprio elemento.

Vamos ver um exemplo. Suponha que temos um código como este:

<div id="parent">
	<div class="elem">
		<p>primeiro parágrafo</p>
		<p>segundo parágrafo</p>
	</div>
</div>

Vamos fazer uma cópia do bloco com a classe elem e inseri-lo no final do bloco #parent:

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

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

O resultado será o seguinte:

<div id="parent">
	<div class="elem">
		<p>primeiro parágrafo</p>
		<p>segundo parágrafo</p>
	</div>
	<div class="elem">
		<p>primeiro parágrafo</p>
		<p>segundo parágrafo</p>
	</div>
</div>

Dado um input. Dado um botão. Ao clicar no botão, clone este input.