เมธอด HTML DOM createDocumentFragment() ใช้สำหรับสร้างแฟรกเมนต์เอกสาร ส่วนของเอกสารไม่มีผลกับโครงสร้าง DOM เนื่องจากอยู่ในหน่วยความจำ เมื่อเราผนวกส่วนย่อยของเอกสารเข้ากับ DOM โดยทั่วไปแล้วจะถูกแทนที่ด้วยส่วนย่อยของเอกสาร กล่าวคือไม่มีส่วนย่อยของเอกสารที่ต่อท้ายเอกสารมีเพียงส่วนย่อยเท่านั้นที่จะถูกผนวก
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับเมธอด createDocumentFragment() -
document.createDocumentFragment()
ส่งคืนอ็อบเจ็กต์ DocumentFragment แทนโหนด documentFragment
ตัวอย่าง
ให้เราดูตัวอย่างสำหรับเมธอด HTML DOM createDocumentFragment() -
<!DOCTYPE html>
<html>
<body>
<h1>createDocumentFragment() example</h1>
<p>Click the below button to change list items using the createDocumentFragment method.</p>
<button type="button" onclick="changeList()">CHANGE</button>
<ul>
<li>Mango</li>
<li>Peach</li>
<li>Guava<li>
<li>Strawberry</liv
<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() สร้างส่วนย่อยของเอกสารโดยใช้เมธอด createDocumentFragment() ของอ็อบเจ็กต์เอกสาร และกำหนดให้กับตัวแปร x การใช้เมธอด appnedChild() เราสร้างรายการองค์ประกอบลูกของส่วนย่อยของเอกสาร เราตั้งค่าองค์ประกอบรายการแรกที่อยู่ภายในส่วนย่อยของเอกสารเป็น "แตงโม" จากนั้นเราผนวกส่วนย่อยของเอกสารเป็นลูกสุดท้ายของ
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);
} 