Elemek klónozása JavaScriptben

Ebben a leckében megtanuljuk, hogyan készíthetünk elemek másolatát. Ezekkel a másolatokkal ugyanúgy dolgozhatunk, mint a közönséges elemekkel - módosíthatjuk őket és beilleszthetjük az oldal kívánt helyére. Az elemek másolatainak elkészítését klónozásnak nevezzük.

Egy elemet a cloneNode metódussal lehet klónozni. Ennek a metódusnak true vagy false értéket kell átadni paraméterként. Ha true értéket adunk át, akkor az elemet teljesen, minden attribútumával és gyermek elemeivel együtt klónozza, ha false értéket - akkor csak magát az elemet.

Nézzük egy példán. Tegyük fel, hogy a following kódunk van:

html<div id="parent">
  <div class="elem">
    <p>első bekezdés</p>
    <p>második bekezdés</p>
  </div>
</div>

Készítsünk egy másolatot a elem osztályú blokkról, és illesszük be a #parent blokk végére:

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

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

Az eredmény a következő lesz:

html<div id="parent">
  <div class="elem">
    <p>első bekezdés</p>
    <p>második bekezdés</p>
  </div>
  <div class="elem">
    <p>első bekezdés</p>
    <p>második bekezdés</p>
  </div>
</div>