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:

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

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

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

O resultado será o seguinte:

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