طريقة 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 1 (1998).

جميع المتصفحات يدعمونه:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
الدعم 9-11 الدعم الدعم الدعم الدعم