HTML DOM createDocumentFragment() मेथड

HTML DOM createDocumentFragment() मेथड का उपयोग डॉक्यूमेंट फ्रैगमेंट बनाने के लिए किया जाता है। डॉक्यूमेंट फ्रैगमेंट DOM स्ट्रक्चर को प्रभावित नहीं करता क्योंकि यह मेमोरी में रहता है। जब हम डॉक्यूमेंट फ्रैगमेंट को DOM में जोड़ते हैं, तो यह मूल रूप से अपने चिल्ड्रन द्वारा रिप्लेस हो जाता है यानी डॉक्यूमेंट में कोई डॉक्यूमेंट फ्रैगमेंट नहीं जुड़ता, केवल इसके चिल्ड्रन जुड़ते हैं।

सिंटैक्स (Syntax)

createDocumentFragment() मेथड का सिंटैक्स:

document.createDocumentFragment()

यह एक DocumentFragment ऑब्जेक्ट वापस करता है, जो डॉक्यूमेंटफ्रैगमेंट नोड को दर्शाता है।

उदाहरण (Example)

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>

आउटपुट (Output)

इससे निम्नलिखित आउटपुट प्राप्त होगा:

HTML DOM createDocumentFragment() मेथड

CHANGE बटन पर क्लिक करने पर:

HTML DOM createDocumentFragment() मेथड

उपरोक्त उदाहरण में:

हमने पांच लिस्ट आइटम्स के साथ एक अनऑर्डर्ड लिस्ट बनाई है:

<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 में असाइन करता है। appendChild() मेथड का उपयोग करके हम लिस्ट एलिमेंट को डॉक्यूमेंट फ्रैगमेंट का चाइल्ड बनाते हैं। हम डॉक्यूमेंट फ्रैगमेंट के अंदर पहले लिस्ट एलिमेंट की वैल्यू को "Watermelon" सेट करते हैं। फिर हम डॉक्यूमेंट फ्रैगमेंट को <ul> के अंतिम चाइल्ड के रूप में जोड़ते हैं:

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