HTML-DOM-Dokument createDocumentFragment()
Beispiele
Elemente zu einer leeren Liste hinzufügen:
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);
Elemente zu einer bestehenden Liste hinzufügen:
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);
Definition und Verwendung
Die createDocumentFragment()Methode erstellt einen Offscreen-Knoten.
Der Offscreen-Knoten kann verwendet werden, um ein neues Dokumentfragment zu erstellen, das in jedes Dokument eingefügt werden kann.
Die createDocumentFragment()Methode kann auch verwendet werden, um Teile eines Dokuments zu extrahieren, einen Teil des Inhalts zu ändern, hinzuzufügen oder zu löschen und ihn wieder in das Dokument einzufügen.
Notiz
Sie können HTML-Elemente jederzeit direkt bearbeiten. Aber ein besserer Weg ist, ein (Offscreen-)Dokumentfragment zu konstruieren und dieses Fragment an das reale (Live-)DOM anzuhängen, wenn es fertig ist. Da Sie das Fragment einfügen, wenn es fertig ist, gibt es nur einen Reflow und ein einzelnes Rendering.
Wenn Sie HTML-Elemente in einer Schleife anhängen möchten, verbessert die Verwendung von Dokumentfragmenten auch die Leistung.
Warnung!
An das Dokumentfragment angehängte Dokumentknoten werden aus dem Originaldokument entfernt.
Syntax
document.createDocumentFragment()
Parameter
| KEINER |
Rückgabewert
| Typ | Beschreibung |
| Knoten | Der erstellte DocumentFragment-Knoten. |
Browser-Unterstützung
document.createComment() ist eine Funktion von DOM Level 1 (1998).
Es wird in allen Browsern vollständig unterstützt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |