Kursus anbefaling:

HTML DOM Document createDocumentFragment() metode

Offscreen-noder kan bruges til at bygge nye dokumentfragmenter, der kan indsættes i ethvert dokument. Definering og brug

Metoden opretter offscreen-noder.

Offscreen-noder kan bruges til at bygge nye dokumentfragmenter, der kan indsættes i ethvert dokument. createDocumentFragment()

Metoden kan også bruges til at udtrække dele af dokumentet, ændre, tilføje eller fjerne indhold, og derefter indsætte det tilbage i dokumentet.

Tip

Du kan altid redigere HTML-elementer direkte. Men en bedre metode er at bygge (offscreen) dokumentfragmenter og tilføje dette fragment til den faktiske (aktive) DOM, når det er klart. Da du indsætter fragmentet, når det er klart, vil det kun kræve én omorganisering og én rendering.

Hvis du vil tilføje HTML-elementer i en løkke, kan brug af dokumentfragmenter også forbedre ydeevnen.Bemærk:

Dokumentknuder, der tilføjes til dokumentfragmentet, fjernes fra den oprindelige dokument.

Eksempel

Eksempel 1

Tilføj elementer til eksisterende liste:
const fruits = ['Banana', 'Orange', 'Mango'];
// Opret dokumentfragment:
const dFrag = document.createDocumentFragment();
// Tilføj li-elementet til fragmentet:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Tilføj fragmentet til listen:

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

Tilføj elementer til tom liste:

Eksempel 2

Tilføj elementer til eksisterende liste:
const fruits = ['Banana', 'Orange', 'Mango'];
// Opret dokumentfragment:
const dFrag = document.createDocumentFragment();
// Tilføj li-elementet til fragmentet:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Tilføj fragmentet til listen:

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

Prøv det selv

Syntaks

document.createDocumentFragment()

Parametre

Ingen.

Type Beskrivelse
Node Nyligt oprettede DocumentFragment-noder, ingen undernoder.

Browserstøtte

document.createComment() Er en funktion fra DOM Level 1 (1998).

Det støttes af alle browsere:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Støtte 9-11 Støtte Støtte Støtte Støtte