HTML DOM-document createDocumentFragment()
Voorbeelden
Voeg elementen toe aan een lege lijst:
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);
Elementen toevoegen aan een bestaande lijst:
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);
Definitie en gebruik
De createDocumentFragment()
methode creëert een offscreen-knooppunt.
Het offscreen-knooppunt kan worden gebruikt om een nieuw documentfragment te maken dat in elk document kan worden ingevoegd.
De createDocumentFragment()
methode kan ook worden gebruikt om delen van een document te extraheren, een deel van de inhoud te wijzigen, toe te voegen of te verwijderen en deze weer in het document in te voegen.
Opmerking
U kunt HTML-elementen altijd rechtstreeks bewerken. Maar een betere manier is om een (offscreen) documentfragment te construeren en dit fragment aan de echte (live) DOM te koppelen wanneer het klaar is. Omdat u het fragment invoegt wanneer het klaar is, is er slechts één reflow en één enkele render.
Als u items van HTML-elementen in een lus wilt toevoegen, verbetert het gebruik van documentfragmenten ook de prestaties.
Waarschuwing!
Documentknooppunten die aan het documentfragment zijn toegevoegd, worden uit het originele document verwijderd.
Syntaxis
document.createDocumentFragment()
Parameters:
GEEN |
Winstwaarde
Type | Beschrijving |
Knooppunt | Het gemaakte DocumentFragment-knooppunt. |
Browserondersteuning
document.createComment()
is een DOM Level 1 (1998)-functie.
Het wordt volledig ondersteund in alle browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |