Método cloneNode

O método cloneNode permite clonar um elemento e obter sua cópia exata. Esta cópia pode então ser inserida na página com a ajuda dos métodos prepend, append, appendChild, insertBefore ou insertAdjacentElement.

No parâmetro, o método recebe true ou false. Se for passado true, o elemento é clonado completamente, com todos os atributos e elementos filhos, e se for false - apenas o próprio elemento (sem os elementos filhos).

Sintaxe

elemento.cloneNode(true ou false);

Exemplo

Vamos fazer uma cópia do bloco com a classe elem e inseri-lo no final do bloco #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 da execução do 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>

Exemplo

Com o clone obtido, pode-se trabalhar como com um elemento comum:

<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 = 'novo texto1';
clone.children[1].textContent = 'novo texto2';

parent.appendChild(clone);

Resultado da execução do código:

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

Veja também

método createElement,
com o qual se pode criar um novo elemento