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:

<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:

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

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

Netijede şu ýaly bolýar:

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

Input berlen. Tugma berlen. Tugma basylanda bu inputy klonlaň.