Документ 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-элементы напрямую. Но лучший способ — создать (закадровый) фрагмент документа и прикрепить этот фрагмент к реальному (живому) DOM, когда он будет готов. Поскольку вы вставляете фрагмент, когда он готов, будет только одна перекомпоновка и один единственный рендер.
Если вы хотите добавлять элементы HTML в циклы, использование фрагментов документа также повышает производительность.
Предупреждение!
Узлы документа, добавленные к фрагменту документа, удаляются из исходного документа.
Синтаксис
document.createDocumentFragment()
Параметры
| НИКТО |
Возвращаемое значение
| Тип | Описание |
| Узел | Созданный узел DocumentFragment. |
Поддержка браузера
document.createComment()является функцией DOM уровня 1 (1998 г.).
Он полностью поддерживается во всех браузерах:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |