การโคลนนิ่งองค์ประกอบใน JavaScript

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

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

มาดูตัวอย่างกัน สมมติว่าเรามีโค้ดดังนี้:

<div id="parent">
	<div class="elem">
		<p>ย่อหน้าแรก</p>
		<p>ย่อหน้าที่สอง</p>
	</div>
</div>

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

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

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

ผลลัพธ์ที่ได้จะเป็นดังนี้:

<div id="parent">
	<div class="elem">
		<p>ย่อหน้าแรก</p>
		<p>ย่อหน้าที่สอง</p>
	</div>
	<div class="elem">
		<p>ย่อหน้าแรก</p>
		<p>ย่อหน้าที่สอง</p>
	</div>
</div>

กำหนดอินพุต และกำหนดปุ่ม เมื่อคลิกที่ปุ่ม ให้โคลนอินพุตนี้