Metode cloneNode

Metode cloneNode memungkinkan untuk mengkloning elemen dan mendapatkan salinan persisnya. Salinan ini kemudian dapat dimasukkan ke halaman dengan menggunakan metode prepend, append, appendChild, insertBefore atau insertAdjacentElement.

Dalam parameternya, metode menerima true atau false. Jika true diteruskan, maka elemen dikloning secara lengkap, bersama dengan semua atribut dan elemen turunannya, dan jika false - hanya elemen itu sendiri (tanpa elemen turunan).

Sintaksis

elemen.cloneNode(true atau false);

Contoh

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

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

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

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

Hasil eksekusi kode:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

Contoh

Dengan klon yang dihasilkan, kita dapat bekerja seolah-olah itu adalah elemen biasa:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'teks1 baru';
clone.children[1].textContent = 'teks2 baru';

parent.appendChild(clone);

Hasil eksekusi kode:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>teks1 baru</p>
		<p>teks2 baru</p>
	</div>
</div>

Lihat juga

metode createElement,
yang dapat digunakan untuk membuat elemen baru