Рекомендации по курсу:

Метод HTML DOM Document createDocumentFragment()

Offscreen узел можно использовать для создания нового документального фрагмента, который можно вставить в любую документ. Определение и использование

Этот метод создает 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).

Все браузеры поддерживают его:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка