Meetod cloneNode

Meetod cloneNode võimaldab kloonida elementi ja saada selle täpse koopia. Seda koopiat saab seejärel lehele sisestada kasutades meetodeid prepend, append, appendChild, insertBefore või insertAdjacentElement.

Parameetrina saab meetod true või false. Kui edastatakse true, kloonitakse element täielikult, koos kõigi atribuutide ja alam- elementidega, aga kui false - ainult element ise (ilma alamelementideta).

Süntaks

javascriptelement.cloneNode(true või false);

Näide

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

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);

Koodi täitmise tulemus:

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>

Näide

Saadud klooniga saab töötada nagu tavalise elemendiga:

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 = 'new text1';
clone.children[1].textContent = 'new text2';

parent.appendChild(clone);

Koodi täitmise tulemus:

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

Vaata ka