Metodas cloneNode

Metodas cloneNode leidžia klonuoti elementą ir gauti jo tikslų kopiją. Šią kopiją vėliau galima įterpti į puslapį naudojant metodus prepend, append, appendChild, insertBefore arba insertAdjacentElement.

Parametre metodas priima true arba false. Jei perduodama true, elementas klonuojamas visiškai, kartu su visais atributais ir dukteriniais elementais, o jei false - tik pats elementas (be dukterinių elementų).

Sintaksė

javascriptelementas.cloneNode(true arba false);

Pavyzdys

Sukurkime bloko su klase elem kopiją ir įterpkime ją į #parent bloko pabaigą:

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

Kodo vykdymo rezultatas:

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>

Pavyzdys

Su gautu klonu galima dirbti kaip su įprastu elementu:

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

Kodo vykdymo rezultatas:

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>

Taip pat žiūrėkite