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