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) विशेषता है।

सभी ब्राउज़र इसका समर्थन करते हैं:}}

च्रोम आईई एज फायरफॉक्स सफारी ऑपेरा
च्रोम आईई एज फायरफॉक्स सफारी ऑपेरा
सापोर्ट 9-11 सापोर्ट सापोर्ट सापोर्ट सापोर्ट