Elementlərin JavaScript-də klonlanması

Bu dərsdə biz elementlərin kopyalarını necə əldə edəcəyimizi öyrənəcəyik. Bu kopyalarla adi elementlər kimi işləmək olar - onları dəyişmək və səhifədə lazımi yerə yerləşdirmək. Elementlərin kopyalarının əldə edilməsi prosesi klonlama adlanır.

Element cloneNode metodu ilə klonlana bilər. Bu metod parametr kimi true və ya false qəbul edir. Əgər true ötürülərsə, element bütün atributları və alt elementləri ilə birlikdə tam klonlanır, əgər false ötürülərsə - yalnız özü klonlanır.

Nümunəyə baxaq. Tutaq ki, bizim belə bir kodumuz var:

<div id="parent">
	<div class="elem">
		<p>birinci abzas</p>
		<p>ikinci abzas</p>
	</div>
</div>

Gəlin elem sinifli blokun kopyasını edək və onu #parent blokunun sonuna əlavə edək:

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

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

Nəticə belə olacaq:

<div id="parent">
	<div class="elem">
		<p>birinci abzas</p>
		<p>ikinci abzas</p>
	</div>
	<div class="elem">
		<p>birinci abzas</p>
		<p>ikinci abzas</p>
	</div>
</div>

Input verilib. Düymə verilib. Düyməyə kliklədikdə bu inputu klonlayın.