วิธี HTML DOM Document createDocumentFragment()

การระบุและการใช้งาน

createDocumentFragment() วิธีนี้สร้างตัวเลือก offscreen

ตัวเลือก offscreen สามารถใช้เพื่อสร้างส่วนที่ตั้งแต่งเข้าไปใหม่ที่สามารถใส่ไปในเอกสารใดๆ

createDocumentFragment() วิธีนี้ยังสามารถใช้เพื่อดึงออกส่วนที่ตั้งแต่งเข้าไปในเอกสาร แก้ไข เพิ่มหรือลบบางส่วน และใส่คืนส่วนนี้เข้าไปในเอกสาร

คำแนะนำ

คุณสามารถแก้ไขตัวเลือก HTML โดยตรงเสมอ แต่วิธีที่ดีกว่าคือการสร้างส่วนที่ตั้งแต่งเข้าไป (offscreen) และใส่ส่วนนี้เข้าไปใน DOM ที่เปิดโชว์เมื่อพร้อม ตรงที่คุณสร้างส่วนนี้เสมอ จะมีการเรียกใช้การเรียงและการแสดงภาพเพียงครั้งเดียว

หากคุณต้องการใส่องค์ประกอบ HTML ในรอบวงล้อมที่เปิดโชว์เป็นชุด การใช้ส่วนที่ตั้งแต่งเข้าไปก็สามารถเพิ่มประสิทธิภาพในการทำงาน

ข้อเน้นตัว:โครงสร้างเอกสารที่ถูกเพิ่มเข้าไปในส่วนที่ตั้งแต่งเข้าไปจะถูกลบออกจากเอกสารเดิม

ตัวอย่าง

ตัวอย่าง 1

เพิ่มองค์ประกอบเข้าไปในรายการที่ว่าง

const fruits = ["Banana", "Orange", "Mango"];
// สร้างส่วนที่ตั้งแต่งเข้าไปในเอกสาร:
const dFrag = document.createDocumentFragment();
// ใส่องค์ประกอบ li ในส่วนที่ตั้งแต่งเข้าไป:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// ใส่ส่วนที่ตั้งแต่งเข้าไปในรายการ:
document.getElementById('myList').appendChild(dFrag);

ลองทดลองด้วยตัวเอง

ตัวอย่าง 2

เพิ่มองค์ประกอบเข้าไปในรายการที่มีอยู่แล้ว:

const fruits = ["Banana", "Orange", "Mango"];
// สร้างส่วนที่ตั้งแต่งเข้าไปในเอกสาร:
const dFrag = document.createDocumentFragment();
// ใส่องค์ประกอบ li ในส่วนที่ตั้งแต่งเข้าไป:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// ใส่ส่วนที่ตั้งแต่งเข้าไปในรายการ:
document.getElementById('myList').appendChild(dFrag);

ลองทดลองด้วยตัวเอง

การใช้งาน

document.createDocumentFragment()

ตัวแปร

ไม่มี

ไม่มี

ชนิด การอธิบาย
ตัวเลข DocumentFragment ที่สร้างขึ้นใหม่ไม่มีฟากลูก

การสนับสนุนโดยเบราเซอร์

document.createComment() คือคุณสมบัติ DOM Level 1 (1998)。

ทุกบราวเซอร์ต่างๆ สนับสนุนมัน:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน