Kloniranje elementov v JavaScriptu

V tej lekciji se bomo naučili pridobivati kopije elementov. S temi kopijami lahko delujemo kot z običajnimi elementi - jih spreminjamo in vstavljamo na želeno mesto na strani. Proces pridobivanja kopij elementov imenujemo kloniranje.

Element lahko kloniramo z metodo cloneNode. V to metodo je treba posredovati parameter true ali false. Če je posredovano true, se element klonira v celoti, skupaj z vsemi atributi in podrejenimi elementi, če pa false - samo sam element.

Poglejmo si na primeru. Naj imamo takšno kodo:

html<div id="parent">
  <div class="elem">
    <p>prvi odstavek</p>
    <p>drugi odstavek</p>
  </div>
</div>

Naredimo kopijo bloka z razredom elem in ga vstavimo na konec bloka #parent:

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

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

Rezultat bo naslednji:

html<div id="parent">
  <div class="elem">
    <p>prvi odstavek</p>
    <p>drugi odstavek</p>
  </div>
  <div class="elem">
    <p>prvi odstavek</p>
    <p>drugi odstavek</p>
  </div>
</div>