วิธี cloneNode

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

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

ไวยากรณ์

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

ตัวอย่าง

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

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

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

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

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

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

ตัวอย่าง

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

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

javascriptlet 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);

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

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

ดูเพิ่มเติม