Document.createDocumentFragment()

Erzeugt ein neues DocumentFragment Objekt.

Syntax

var fragment = document.createDocumentFragment();

fragment ist hierbei eine Referenz zu einem neu erstellten, leeren DocumentFragment Objekt.

Beschreibung

DocumentFragments 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) ? ? ?

See also