createDocumentFragment()
Обновлено: 27.03.2023
Визначення та використання
Метод createDocumentFragment()створює закадровий вузол.
Закадровий вузол можна використовувати для створення нового фрагмента документа, який можна вставити в будь-який документ.
Метод createDocumentFragment()також можна використовувати для вилучення частин документа, зміни, додавання або видалення частини вмісту та вставлення його назад у документ.
Приклади
Додайте елементи до порожнього списку:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const dFrag = 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(dFrag);Примітка
Ви завжди можете безпосередньо редагувати елементи HTML. Але кращий спосіб — створити (закадровий) фрагмент документа та прикріпити цей фрагмент до реального (живого) DOM, коли він буде готовий. Оскільки ви вставляєте фрагмент, коли він готовий, буде лише одне перекомпонування та одне єдине рендеринг.
Якщо ви хочете додати елементи HTML-елементів у циклі, використання фрагментів документа також покращує продуктивність.
УВАГА!
Вузли документа, додані до фрагмента документа, видаляються з вихідного документа.
Синтаксис
document.createDocumentFragment()
Параметри
| ЖОДНОГО |
Повернене значення
| Тип | опис |
| Вузол | Створений вузол DocumentFragment. |