Документ: метод createDocumentFragment()

Базовая версия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Создаёт новый пустой DocumentFragment, в который можно добавлять узлы DOM для построения офскринного дерева DOM.

Синтаксис

createDocumentFragment()

Параметры

Нет.

Возвращаемое значение

Новый созданный пустой объект DocumentFragment, готовый к вставке узлов.

Примечания по использованию

DocumentFragment — это объекты DOM Node, которые никогда не являются частью основного дерева DOM. Обычно используется создание фрагмента документа, добавление элементов в фрагмент документа, а затем добавление фрагмента документа в дерево DOM. В дереве DOM фрагмент документа заменяется всеми его дочерними элементами.

Поскольку фрагмент документа находится в памяти и не является частью основного дерева DOM, использование фрагментов документов может привести к лучшей производительности в некоторых старых движках.

Также можно использовать конструктор DocumentFragment для создания нового фрагмента:

const fragment = new DocumentFragment();

Примеры

В этом примере создаётся список основных веб-браузеров в DocumentFragment, а затем новая поддеревья DOM добавляется в документ для отображения.

HTML

<ul id="ul"></ul>

JavaScript

const element = document.getElementById("ul"); // assuming ul exists
const fragment = document.createDocumentFragment();
const browsers = ["Firefox", "Chrome", "Opera", "Safari"];

browsers.forEach((browser) => {
  const li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);

Результат

Спецификации

Спецификация
DOM # ref-for-dom-document-createdocumentfragment①

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`createDocumentFragment`	1	12	1	≤12.1	1	18	4	≤12.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment