HTML DOM Dokument createDocumentFragment()
Voorbeelde
Voeg elemente by 'n leë lys:
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);
Voeg elemente by 'n bestaande lys:
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);
Definisie en gebruik
Die createDocumentFragment()metode skep 'n offscreen node.
Die offscreen node kan gebruik word om 'n nuwe dokumentfragment te bou wat in enige dokument ingevoeg kan word.
Die createDocumentFragment()metode kan ook gebruik word om dele van 'n dokument te onttrek, van die inhoud te verander, by te voeg of uit te vee, en dit terug in die dokument in te voeg.
Let wel
Jy kan altyd HTML-elemente direk wysig. Maar 'n beter manier is om 'n (afskerm) dokumentfragment te konstrueer, en hierdie fragment aan die regte (lewendige) DOM te heg wanneer dit gereed is. Omdat jy die fragment invoeg wanneer dit gereed is, sal daar net een hervloei en een enkele weergawe wees.
As jy HTML-elemente-items in 'n lusse wil byvoeg, verbeter die gebruik van dokumentfragmente ook werkverrigting.
Waarskuwing!
Dokumentnodes wat aan die dokumentfragment aangeheg is, word van die oorspronklike dokument verwyder.
Sintaksis
document.createDocumentFragment()
Grense
| GEEN |
Terugkeerwaarde
| Tik | Beskrywing |
| Nodus | Die geskepte DocumentFragment nodus. |
Blaaierondersteuning
document.createComment()is 'n DOM Vlak 1 (1998) kenmerk.
Dit word ten volle ondersteun in alle blaaiers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |