cloneNode-metodi

Metodi cloneNode mahdollistaa elementin kloonaamisen ja sen tarkan kopion saamisen. Tämän kopion voi sitten lisätä sivuille käyttämällä metodeja prepend, append, appendChild, insertBefore tai insertAdjacentElement.

Parametrina metodi saa true tai false. Jos annetaan true, elementti kloonataan kokonaan, kaikkine attribuutteineen ja lapsi- elementteineen, ja jos false - vain itse elementti (ilman lapsielementtejä).

Syntaksi

javascriptelementti.cloneNode(true tai false);

Esimerkki

Tehdään kopio lohkosta, jolla on luokka elem ja lisätään se lohkon #parent loppuun:

html<div id="parent">
  <div class="elem">
    <p>teksti1</p>
    <p>teksti2</p>
  </div>
</div>

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

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

Koodin suorituksen tulos:

html<div id="parent">
  <div class="elem">
    <p>teksti1</p>
    <p>teksti2</p>
  </div>
  <div class="elem">
    <p>teksti1</p>
    <p>teksti2</p>
  </div>
</div>

Esimerkki

Saatua kloonia voi käsitellä kuin tavallista elementtiä:

html<div id="parent">
  <div class="elem">
    <p>teksti1</p>
    <p>teksti2</p>
  </div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'uusi teksti1';
clone.children[1].textContent = 'uusi teksti2';

parent.appendChild(clone);

Koodin suorituksen tulos:

html<div id="parent">
  <div class="elem">
    <p>teksti1</p>
    <p>teksti2</p>
  </div>
  <div class="elem">
    <p>uusi teksti1</p>
    <p>uusi teksti2</p>
  </div>
</div>

Katso myös