Tworzenie dokumentu HTML DOMDocumentFragment()
Przykłady
Dodaj elementy do pustej listy:
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);
Dodaj elementy do istniejącej listy:
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);
Definicja i użycie
Metoda createDocumentFragment()
tworzy węzeł poza ekranem.
Węzeł poza ekranem może być użyty do zbudowania nowego fragmentu dokumentu, który można wstawić do dowolnego dokumentu.
Metoda createDocumentFragment()
może być również używana do wyodrębniania części dokumentu, zmieniania, dodawania lub usuwania niektórych treści i wstawiania jej z powrotem do dokumentu.
Notatka
Zawsze możesz edytować elementy HTML bezpośrednio. Ale lepszym sposobem jest skonstruowanie (pozaekranowego) fragmentu dokumentu i dołączenie tego fragmentu do rzeczywistego (żywego) DOM, gdy będzie gotowy. Ponieważ wstawiasz fragment, gdy jest gotowy, będzie tylko jedno ponowne wlanie i jedno renderowanie.
Jeśli chcesz dołączyć elementy HTML w pętle, użycie fragmentów dokumentów również poprawia wydajność.
Ostrzeżenie!
Węzły dokumentu dołączone do fragmentu dokumentu są usuwane z oryginalnego dokumentu.
Składnia
document.createDocumentFragment()
Parametry
ŻADEN |
Wartość zwrotu
Rodzaj | Opis |
Węzeł | Utworzony węzeł DocumentFragment. |
Obsługa przeglądarki
document.createComment()
to funkcja DOM Level 1 (1998).
Jest w pełni obsługiwany we wszystkich przeglądarkach:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |