Elementide kloonimine JavaScriptis

Selles õppetükis õpime saama elementide koopiaid. Nendega saab töötada nagu tavaliste elementidega - muuta neid ja sisestada lehele õigesse kohta. Protsessi elementide koopiate saamiseks nimetatakse kloonimiseks.

Elementi saab kloonida meetodi abil cloneNode. Sellele meetodile tuleb edastada parameetrina true või false. Kui edastatakse true, kloonitakse element täielikult, koos kõigi atribuutide ja alam-elementidega, aga kui false - ainult element ise.

Vaatame näidet. Olgu meil järgmine kood:

html<div id="parent">
  <div class="elem">
    <p>esimene lõik</p>
    <p>teine lõik</p>
  </div>
</div>

Teeme klassi elem bloki koopia ja sisestame selle bloki #parent lõppu:

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

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

Tulemuseks saame järgmise:

html<div id="parent">
  <div class="elem">
    <p>esimene lõik</p>
    <p>teine lõik</p>
  </div>
  <div class="elem">
    <p>esimene lõik</p>
    <p>teine lõik</p>
  </div>
</div>