HTML DOM Document createDocumentFragment() metod

Definition och användning

createDocumentFragment() Metoden skapar offscreen-noder.

Offscreen-noder kan användas för att bygga nya dokumentfragment som kan infogas i vilket dokument som helst.

createDocumentFragment() Metoden kan också användas för att extrahera delar av dokumentet, ändra, lägga till eller ta bort innehåll och sedan lägga tillbaka det i dokumentet.

Tips

Du kan alltid direkt redigera HTML-element. Men ett bättre sätt är att bygga (offscreen) dokumentfragment och lägga till detta fragment till den verkliga (aktiva) DOM när det är klart. Eftersom du lägger till fragmentet när det är klart, kommer det endast att krävas en enda omstrukturering och rendering.

Om du vill lägga till HTML-element i en loop kan användning av dokumentfragment också förbättra prestanda.

Observera:Dokumentnoder som läggs till i dokumentfragmentet kommer att tas bort från den ursprungliga dokumentet.

Exempel

Exempel 1

Lägg till element till tom lista:

const fruits = ["Banana", "Orange", "Mango"];
// Skapa dokumentfragment:
const dFrag = document.createDocumentFragment();
// Lägg till li-elementet i fragmentet:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Lägg till fragmentet i listan:
document.getElementById('myList').appendChild(dFrag);

Prova själv

Exempel 2

Lägg till element till befintlig lista:

const fruits = ["Banana", "Orange", "Mango"];
// Skapa dokumentfragment:
const dFrag = document.createDocumentFragment();
// Lägg till li-elementet i fragmentet:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Lägg till fragmentet i listan:
document.getElementById('myList').appendChild(dFrag);

Prova själv

syntaks

document.createDocumentFragment()

parametrar

inget.

inget.

typ beskrivning
nod Nyligen skapade DocumentFragment-noder, utan undernoder.

Webbläsarstöd

document.createComment() är en egenskap i DOM Level 1 (1998).

Alla webbläsare stöder det:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd