Klonowanie elementów w JavaScript

W tej lekcji nauczymy się uzyskiwać kopie elementów. Z tymi kopiami można pracować jak ze zwykłymi elementami - zmieniać je i wstawiać w odpowiednie miejsce na stronie. Proces uzyskiwania kopii elementów nazywa się klonowanie.

Element można sklonować za pomocą metody cloneNode. Do tej metody należy przekazać parametr true albo false. Jeśli przekazano true, element jest klonowany w całości, razem ze wszystkimi atrybutami i elementami potomnymi, a jeśli false - tylko sam element.

Spójrzmy na przykład. Załóżmy, że mamy taki kod:

html<div id="parent">
  <div class="elem">
    <p>pierwszy akapit</p>
    <p>drugi akapit</p>
  </div>
</div>

Zróbmy kopię bloku z klasą elem i wstawmy ją na koniec bloku #parent:

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

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

W rezultacie otrzymamy następujący wynik:

html<div id="parent">
  <div class="elem">
    <p>pierwszy akapit</p>
    <p>drugi akapit</p>
  </div>
  <div class="elem">
    <p>pierwszy akapit</p>
    <p>drugi akapit</p>
  </div>
</div>