Kaedah cloneNode

Kaedah cloneNode membolehkan anda mengklon elemen dan mendapatkan salinannya yang tepat. Salinan ini kemudian boleh dimasukkan ke dalam halaman menggunakan kaedah prepend, append, appendChild, insertBefore atau insertAdjacentElement.

Dalam parameternya, kaedah menerima true atau false. Jika true diberikan, elemen akan diklon sepenuhnya, bersama semua atribut dan elemen anak, dan jika false - hanya elemen itu sendiri (tanpa elemen anak).

Sintaks

elemen.cloneNode(true atau false);

Contoh

Mari buat salinan blok dengan kelas elem dan masukkan ke hujung 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);

Keputusan pelaksanaan kod:

<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

Kloning yang diperoleh boleh dikendalikan seperti 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 = 'teks baru1';
clone.children[1].textContent = 'teks baru2';

parent.appendChild(clone);

Keputusan pelaksanaan kod:

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

Lihat juga

kaedah createElement,
yang boleh digunakan untuk mencipta elemen baharu