Kloning Elemen di JavaScript

Dalam pelajaran ini, kita akan belajar cara mendapatkan salinan elemen. Salinan ini dapat diperlakukan seperti elemen biasa - diubah dan disisipkan ke tempat yang diinginkan di halaman. Proses mendapatkan salinan elemen disebut kloning.

Elemen dapat dikloning menggunakan metode cloneNode. Metode ini perlu diberikan parameter true atau false. Jika diberikan true, elemen akan dikloning sepenuhnya, bersama dengan semua atribut dan elemen turunannya, dan jika false - hanya elemen itu sendiri.

Mari kita lihat contohnya. Misalkan kita memiliki kode seperti ini:

<div id="parent">
	<div class="elem">
		<p>paragraf pertama</p>
		<p>paragraf kedua</p>
	</div>
</div>

Mari buat salinan blok dengan kelas elem dan sisipkan ke akhir blok #parent:

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

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

Hasilnya akan menjadi seperti berikut:

<div id="parent">
	<div class="elem">
		<p>paragraf pertama</p>
		<p>paragraf kedua</p>
	</div>
	<div class="elem">
		<p>paragraf pertama</p>
		<p>paragraf kedua</p>
	</div>
</div>

Diberikan sebuah input. Diberikan sebuah tombol. Saat tombol ditekan, klon input tersebut.