Document: Methode createDocumentFragment()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Erstellt ein neues leeres DocumentFragment, in das DOM-Knoten hinzugefügt werden können, um einen Offscreen-DOM-Baum zu erstellen.

Syntax

createDocumentFragment()

Rückgabewert

Ein neu erstelltes, leeres DocumentFragment-Objekt, das bereit ist, Knoten einzufügen.

DocumentFragments sind DOM-Node-Objekte, die niemals Teil des Haupt-DOM-Baums sind. Der übliche Anwendungsfall besteht darin, das Dokumentfragment zu erstellen, Elemente an das Dokumentfragment anzuhängen und dann das Dokumentfragment an den DOM-Baum anzuhängen. Im DOM-Baum wird das Dokumentfragment durch all seine Kinder ersetzt.

Da das Dokumentfragment im Speicher und nicht Teil des Haupt-DOM-Baums ist, könnte die Verwendung von Dokumentfragmenten in einigen älteren Engines zu besserer Leistung führen.

Sie können auch den DocumentFragment-Konstruktor verwenden, um ein neues Fragment zu erstellen:

const fragment = new DocumentFragment();

Beispiele

Dieses Beispiel erstellt eine Liste der wichtigsten Webbrowser in einem DocumentFragment und fügt dann den neuen DOM-Unterbaum dem Dokument hinzu, das angezeigt werden soll.

HTML

html

<ul id="ul"></ul>

JavaScript

const element = document.getElementById("ul"); // assuming ul exists const fragment = document.createDocumentFragment(); const browsers = ["Firefox", "Chrome", "Opera", "Safari"]; browsers.forEach((browser) => { const li = document.createElement("li"); li.textContent = browser; fragment.appendChild(li); }); element.appendChild(fragment);