HTML DOM Document createDocumentFragment() Methode

Definition und Verwendung

createDocumentFragment() Diese Methode erstellt offscreen-Knoten.

Offscreen-Knoten können verwendet werden, um neue Dokument-Fragmente zu erstellen, die in jeden Dokument eingefügt werden können.

createDocumentFragment() Diese Methode kann auch verwendet werden, um Teile des Dokuments auszulesen, zu ändern, hinzuzufügen oder zu entfernen und diese wieder in das Dokument einzufügen.

Tipp

Sie können HTML-Elemente jederzeit direkt bearbeiten. Ein besseres Vorgehen ist jedoch, (offscreen) Dokument-Fragmente zu erstellen und diese zum richtigen Zeitpunkt in den tatsächlichen (aktiven) DOM hinzuzufügen. Da Sie den Fragment nach seiner Vorbereitung einfügen, wird nur eine Umordnung und eine Rendering erforderlich sein.

Wenn Sie HTML-Elemente in einer Schleife hinzufügen möchten, kann auch die Verwendung von Dokument-Fragmenten die Leistung verbessern.

Hinweis:Dokumentknoten, die in den Dokument-Fragment hinzugefügt werden, werden aus dem ursprünglichen Dokument entfernt.

Beispiel

Beispiel 1

Fügen Sie Elemente zu einer leeren Liste hinzu:

const fruits = ["Banana", "Orange", "Mango"];
// Erstellen Sie einen Dokument-Fragment:
const dFrag = document.createDocumentFragment();
// Fügen Sie das li-Element zum Fragment hinzu:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Fügen Sie den Fragment hinzu:
document.getElementById('myList').appendChild(dFrag);

Versuchen Sie es selbst

Beispiel 2

Fügen Sie Elemente zu einer bestehenden Liste hinzu:

const fruits = ["Banana", "Orange", "Mango"];
// Erstellen Sie einen Dokument-Fragment:
const dFrag = document.createDocumentFragment();
// Fügen Sie das li-Element zum Fragment hinzu:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Fügen Sie den Fragment hinzu:
document.getElementById('myList').appendChild(dFrag);

Versuchen Sie es selbst

Syntax

document.createDocumentFragment()

Parameter

Kein Wert zurückgegeben.

Kein Wert zurückgegeben.

Typ Beschreibung
Knoten Neu erstellte DocumentFragment-Knoten, ohne Unter-Knoten.

Browserunterstützung

document.createComment() ist eine Eigenschaft von DOM Level 1 (1998).

Es wird von allen Browsern unterstützt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung