A cloneNode metódus

A cloneNode metódus lehetővé teszi egy elem klónozását és pontos másolatának elkészítését. Ezt a másolatot ezután be lehet szúrni az oldalra a prepend, append, appendChild, insertBefore vagy insertAdjacentElement metódusok segítségével.

A paraméterben a metódus true vagy false értéket kap. Ha true értéket adunk meg, akkor az elemet teljes egészében klónozza, minden attribútumával és gyermekelemével együtt, ha pedig false - csak magát az elemet (gyermekelemei nélkül).

Szintaxis

javascriptelem.cloneNode(true vagy false);

Példa

Készítsünk egy másolatot a elem osztállyal rendelkező blokkról és szúrjuk be a #parent blokk végére:

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

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

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

A kód végrehajtásának eredménye:

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

Példa

A kapott klónnal ugyanúgy lehet dolgozni, mint egy szokásos elemmel:

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'új text1';
clone.children[1].textContent = 'új text2';

parent.appendChild(clone);

A kód végrehajtásának eredménye:

html<div id="parent">
  <div class="elem">
    <p>text1</p>
    <p>text2</p>
  </div>
  <div class="elem">
    <p>új text1</p>
    <p>új text2</p>
  </div>
</div>

Lásd még