เมธอด HTML DOM createDocumentFragment() ใช้สำหรับสร้าง Document Fragment (ส่วนของเอกสาร) Document fragment ไม่ส่งผลต่อโครงสร้าง DOM เนื่องจากมันอยู่ในหน่วยความจำ เมื่อเราผนวก document fragment เข้า DOM มันจะถูกแทนที่ด้วยลูกของมัน คือ ไม่มี document fragment ถูกผนวกกับเอกสาร เพียงแค่ลูกของมันเท่านั้นที่ถูกผนวก
ไวยากรณ์
ไวยากรณ์สำหรับเมธอด createDocumentFragment() ดังนี้ -
document.createDocumentFragment()
มันคืนค่าอ็อบเจกต์ DocumentFragment แทนโหนด documentFragment
ตัวอย่าง
ลองดูตัวอย่างสำหรับเมธอด HTML DOM createDocumentFragment() -
<!DOCTYPE html> <html> <body> <h1>createDocumentFragment() example</h1> <p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนรายการลิสต์โดยใช้เมธอด createDocumentFragment</p> <button type="button" onclick="changeList()">CHANGE</button> <ul> <li>Mango</li> <li>Peach</li> <li>Guava</li> <li>Strawberry</li> <li>Papaya</li> </ul> <script> function changeList() { var x = document.createDocumentFragment(); x.appendChild(document.getElementsByTagName("LI")[0]); x.childNodes[0].childNodes[0].nodeValue = "Watermelon"; document.getElementsByTagName("UL")[0].appendChild(x); } </script> </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้ -
เมื่อคลิกปุ่ม CHANGE -
ในตัวอย่างข้างต้น -
เราสร้างรายการไม่เรียงลำดับที่มีห้ารายการ -
<ul> <li>Mango</li> <li>Peach</li> <li>Guava</li> <li>Strawberry</li> <li>Papaya</li> </ul>
เราสร้างปุ่ม CHANGE ที่จะเรียกใช้เมธอด changeList() เมื่อถูกคลิกโดยผู้ใช้ -
<button type="button" onclick="changeList()">CHANGE</button>
ฟังก์ชัน changeList() สร้าง document fragment โดยใช้เมธอด createDocumentFragment() ของอ็อบเจกต์เอกสารและกำหนดให้ตัวแปร x ใช้เมธอด appendChild() เราทำให้องค์ประกอบลิสต์เป็นลูกของ document fragment เราตั้งค่ารายการแรกที่อยู่ใน document fragment เป็น "Watermelon" เราจึงผนวก document fragment เป็นลูกสุดท้ายของ -
function changeList() { var x = document.createDocumentFragment(); x.appendChild(document.getElementsByTagName("LI")[0]); x.childNodes[0].childNodes[0].nodeValue = "Watermelon"; document.getElementsByTagName("UL")[0].appendChild(x); }
