Erzeugt ein neues DocumentFragment
Objekt.
Syntax
var fragment = document.createDocumentFragment();
fragment
ist hierbei eine Referenz zu einem neu erstellten, leeren DocumentFragment
Objekt.
Beschreibung
DocumentFragment
s sind DOM Knoten (DOM Nodes). Sie sind nicht Teil des Haupt- oder Seiten-DOM-Baums. Üblicherweise werden sie verwendet, um einen Teilbaum mit Objekten und Unterobjekten zu erstellen und das Ergebnis anschließend in den Seiten-DOM-Baum einzufügen. In dem DOM-Baum wird das document fragment dann ersetzt mit allen Kindelementen.
Da das gesamte DocumentFragment nur im Speicher vorliegt ("in memory") und nicht Teil des Seiten-DOM-Baums ist, führen Veränderungen in dem DocumentFragment, wie etwa das Hinzufügen von Elementen, nicht zu einem page reflow (die Berechnung der Element Positionen und Geometrie). Dementsprechend führt die Nutzung von DocumentFragments zu einer besseren Performance.
Beispiel
Dieses Beispiel erzeugt eine Liste gängiger Browser.
HTML
<ul id="ul"> </ul>
JavaScript
var element = document.getElementById('ul'); // assuming ul exists var fragment = document.createDocumentFragment(); var browsers = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer']; browsers.forEach(function(browser) { var li = document.createElement('li'); li.textContent = browser; fragment.appendChild(li); }); element.appendChild(fragment);
Resultat
Spezifikationen
Specification | Status | Anmerkungen |
---|---|---|
DOM Die Definition von 'Document.createDocumentFragment()' in dieser Spezifikation. |
Lebender Standard | Initiale Definition in der DOM 1 Spezifikation |
Browserkompatibilität
Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!
Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Ja) | (Ja) | (Ja) | (Ja) | (Ja) | (Ja) |
Feature | Firefox Mobile (Gecko) | Android | Edge | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | ? | (Ja) | ? | ? | ? |