Document: Methode createDocumentFragment()

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);

Ergebnis

Spezifikationen

Specification
DOM Standard # ref-for-dom-document-createdocumentfragment①

Browser-Kompatibilität

BCD tables only load in the browser