JavaScript'te Eleman Klonlama

Bu derste, elemanların kopyalarını nasıl alacağımızı öğreneceğiz. Bu kopyalarla, tıpkı sıradan elemanlarmış gibi çalışabiliriz - onları değiştirebilir ve sayfada istediğimiz yere yerleştirebiliriz. Elemanların kopyalarını alma işlemine klonlama denir.

Bir elemanı, cloneNode metodu kullanarak klonlayabilirsiniz. Bu metoda parametre olarak true ya da false geçirilmelidir. Eğer true geçirilirse, eleman tüm nitelikleri ve alt elemanlarıyla birlikte tamamen klonlanır, eğer false geçirilirse - sadece elemanın kendisi klonlanır.

Bir örnek üzerinde inceleyelim. Diyelim ki şöyle bir kodumuz var:

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

elem sınıfına sahip bloğun bir kopyasını yapalım ve onu #parent bloğunun sonuna ekleyelim:

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

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

Sonuç olarak şu elde edilecektir:

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

Bir input verilmiştir. Bir buton verilmiştir. Butona tıklandığında bu inputu klonlayın.