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 तत्वों को सीधे संपादित कर सकते हैं। लेकिन एक बेहतर तरीका यह है कि एक (ऑफस्क्रीन) दस्तावेज़ खंड का निर्माण किया जाए, और इस टुकड़े को वास्तविक (लाइव) डोम के तैयार होने पर संलग्न किया जाए। चूंकि आप टुकड़ा तैयार होने पर सम्मिलित करते हैं, केवल एक रिफ्लो और एक सिंगल रेंडर होगा।
यदि आप HTML तत्वों के आइटम को लूप में जोड़ना चाहते हैं, तो दस्तावेज़ के टुकड़ों का उपयोग करने से भी प्रदर्शन में सुधार होता है।
चेतावनी!
दस्तावेज़ खंड में संलग्न दस्तावेज़ नोड्स, मूल दस्तावेज़ से हटा दिए जाते हैं।
वाक्य - विन्यास
document.createDocumentFragment()
मापदंडों
कोई नहीं |
प्रतिलाभ की मात्रा
प्रकार | विवरण |
नोड | बनाया गया DocumentFragment node. |
ब्राउज़र समर्थन
document.createComment()
एक डोम लेवल 1 (1998) फीचर है।
यह सभी ब्राउज़रों में पूरी तरह से समर्थित है:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |