วิธี cloneNode

วิธี cloneNode อนุญาตให้โคลน องค์ประกอบและรับสำเนาที่เหมือนกันทุกประการ สำเนานี้ จากนั้นสามารถแทรกเข้าสู่หน้าเว็บได้ด้วย วิธี prepend, append, appendChild, insertBefore หรือ insertAdjacentElement.

ในพารามิเตอร์ วิธีนี้รับ true หรือ false หากส่งค่า true องค์ประกอบจะถูกโคลน ทั้งหมด พร้อมกับแอตทริบิวต์และองค์ประกอบย่อยทั้งหมด แต่ถ้าเป็น false - เฉพาะองค์ประกอบเอง (โดยไม่มีองค์ประกอบย่อย)

ไวยากรณ์

องค์ประกอบ.cloneNode(true หรือ false);

ตัวอย่าง

มาทำสำเนาของบล็อกที่มีคลาส elem และแทรกลงท้ายบล็อก #parent:

<div id="parent">
	<div class="elem">
		<p>ข้อความ1</p>
		<p>ข้อความ2</p>
	</div>
</div>

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

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

ผลลัพธ์การทำงานของโค้ด:

<div id="parent">
	<div class="elem">
		<p>ข้อความ1</p>
		<p>ข้อความ2</p>
	</div>
	<div class="elem">
		<p>ข้อความ1</p>
		<p>ข้อความ2</p>
	</div>
</div>

ตัวอย่าง

สามารถทำงานกับโคลนที่ได้รับได้เหมือนกับ องค์ประกอบทั่วไป:

<div id="parent">
	<div class="elem">
		<p>ข้อความ1</p>
		<p>ข้อความ2</p>
	</div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'ข้อความใหม่1';
clone.children[1].textContent = 'ข้อความใหม่2';

parent.appendChild(clone);

ผลลัพธ์การทำงานของโค้ด:

<div id="parent">
	<div class="elem">
		<p>ข้อความ1</p>
		<p>ข้อความ2</p>
	</div>
	<div class="elem">
		<p>ข้อความใหม่1</p>
		<p>ข้อความใหม่2</p>
	</div>
</div>

ดูเพิ่มเติม

วิธี createElement,
ซึ่งใช้สร้างองค์ประกอบใหม่ได้