เอกสาร HTML DOM createDocumentFragment()
ตัวอย่าง
เพิ่มองค์ประกอบในรายการว่าง:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
เพิ่มองค์ประกอบในรายการที่มีอยู่:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
ความหมายและการใช้งาน
วิธี การcreateDocumentFragment()
สร้างโหนดนอกจอ
สามารถใช้โหนดนอกหน้าจอเพื่อสร้างส่วนเอกสารใหม่ที่สามารถแทรกลงในเอกสารใดก็ได้
วิธีcreateDocumentFragment()
นี้ยังสามารถใช้เพื่อแยกส่วนของเอกสาร เปลี่ยนแปลง เพิ่ม หรือลบเนื้อหาบางส่วน และแทรกกลับเข้าไปในเอกสารได้อีกด้วย
บันทึก
คุณสามารถแก้ไของค์ประกอบ HTML ได้โดยตรงเสมอ แต่วิธีที่ดีกว่าคือการสร้างส่วนเอกสาร (นอกจอ) และแนบส่วนนี้กับ DOM จริง (ใช้งานจริง) เมื่อพร้อม เนื่องจากคุณแทรกแฟรกเมนต์เมื่อพร้อม จึงมีเพียงรีโฟลว์เดียวและเรนเดอร์เดียว
หากคุณต้องการผนวกรายการองค์ประกอบ HTML ในลูป การใช้ส่วนย่อยของเอกสารยังช่วยเพิ่มประสิทธิภาพอีกด้วย
คำเตือน!
โหนดเอกสารที่ต่อท้ายส่วนย่อยของเอกสาร จะถูกลบออกจากเอกสารต้นฉบับ
ไวยากรณ์
document.createDocumentFragment()
พารามิเตอร์
ไม่มี |
คืนมูลค่า
พิมพ์ | คำอธิบาย |
โหนด | โหนด DocumentFragment ที่สร้างขึ้น |
รองรับเบราว์เซอร์
document.createComment()
เป็นคุณลักษณะ DOM ระดับ 1 (1998)
ได้รับการสนับสนุนอย่างเต็มที่ในเบราว์เซอร์ทั้งหมด:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |