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

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

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

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

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

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

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

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

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

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