JavaScript-de elementleri klonlaýyş

Bu sapakda biz elementleriň nusgalaryny almagy öwreneris. Bu nusgalar bilen adaty elementler ýaly işlemek mümkin bolary - olary üýtgetmek we sahypanyň gerek ýerine goýmak. Elementleriň nusgalaryny almak prosesine klonlama diýilýär.

Elementi cloneNode metodi bilen klonlap bolýar. Bu metod parametr hökmünde true ýa-da false almaly. Eger true geçirilse, element tutuşlygyna, ähli atributlary we çaga elementleri bilen bir hatarda klonlanýar. Eger false geçirilse, diňe özi klonlanýar.

Mysala seredeliň. Bizde şeýle kod bolsun:

html<div id="parent">
  <div class="elem">
    <p>birnji abzas</p>
    <p>ikinji abzas</p>
  </div>
</div>

elem klassy bilen blok nusgasyny alyp, onuň soňuna #parent blogyna goýýarys:

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

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

Netijede şu ýaly bolýar:

html<div id="parent">
  <div class="elem">
    <p>birnji abzas</p>
    <p>ikinji abzas</p>
  </div>
  <div class="elem">
    <p>birnji abzas</p>
    <p>ikinji abzas</p>
  </div>
</div>