Polecane kursy:

Metoda HTML DOM Document createDocumentFragment()

Offscreen węzły mogą być używane do budowania nowych fragmentów dokumentu, które można wstawić do dowolnego dokumentu. Definicja i użycie

Metoda tworzy węzeł offscreen.

Offscreen węzły mogą być używane do budowania nowych fragmentów dokumentu, które można wstawić do dowolnego dokumentu. createDocumentFragment()

Metoda ta może również być używana do wyodrębniania części treści dokumentu, modyfikacji, dodawania lub usuwania niektórych treści oraz wstawiania ich z powrotem do dokumentu.

Wskazówka

Zawsze możesz bezpośrednio edytować elementy HTML. Ale lepszym sposobem jest budowanie (offscreen) fragmentu dokumentu i dopiero w momencie gotowości dodawanie tego fragmentu do prawdziwego (aktywnego) DOM. Ponieważ wstawiasz fragment po jego przygotowaniu, zajmie to tylko jedną przestawienie i jedną renderowanie.

Jeśli chcesz dodać elementy HTML w pętli, użycie fragmentu dokumentu może poprawić wydajność.Uwaga:

Węzeł dokumentowy dodany do fragmentu dokumentu zostanie usunięty z oryginalnego dokumentu.

Przykład

Przykład 1

Dodaj element do istniejącej listy:
const fruits = ['Banana', 'Orange', 'Mango'];
// Utwórz dokumentowy fragment:
const dFrag = document.createDocumentFragment();
// Dodaj element li do fragmentu:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Dodaj fragment do listy:

document.getElementById('myList').appendChild(dFrag);

Dodaj element do pustej listy:

Przykład 2

Dodaj element do istniejącej listy:
const fruits = ['Banana', 'Orange', 'Mango'];
// Utwórz dokumentowy fragment:
const dFrag = document.createDocumentFragment();
// Dodaj element li do fragmentu:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Dodaj fragment do listy:

document.getElementById('myList').appendChild(dFrag);

Spróbuj sam

Gramatyka

document.createDocumentFragment()

Parametry

Brak.

Typ Opis
Węzeł Nowo utworzony węzeł DocumentFragment, bez podwęzłów.

Obsługa przeglądarki

document.createComment() To jest cecha DOM Level 1 (1998).

Wszystkie przeglądarki wspierają to:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie 9-11 Wsparcie Wsparcie Wsparcie Wsparcie