JavaScript/DOM/Document/createDocumentFragment

Die Methode Document.createDocumentFragment() erzeugt ein neues DocumentFragment-Objekt im aktuellen Dokument.

Syntax

element = Document.createDocumentFragment()

Die Methode erwartet keine Parameter. Das erzeugte DocumentFragment ist leer und kann nun mit Elementen gefüllt werden. Da das DocumentFragment noch nicht Teil des DOM ist, führt ein Hinzufügen von Elementen nicht zu einem Neuzeichnen der Browser-Darstellung.

Anwendungsbeispiel

Beispiel

  <main id="main">
    <table id="personen">
      <thead>
         <tr>
           <th>Name</th><th>Vorname</th><th>Geburtsdatum</th>
         </tr>
      </thead>
      <tbody/>
    </table>
    <button id="addPerson">Neue Person</button>
  </main>

  document.addEventListener('DOMContentLoaded', function () {
    let element  = document.getElementById ('addPerson');
    element.addEventListener ('click', addPersonenRow);
  }

  function addPersonenRow() {
    let frag = document.createDocumentFragment();
    let row = frag.appendChild(document.createElement('tr'));
    let col1 = row.appendChild(document.createElement('td'));
    let col2 = row.appendChild(document.createElement('td'));
    let col3 = row.appendChild(document.createElement('td'));
    col1.innerHTML = "<input type='text' name='nachname'>";
    col2.innerHTML = "<input type='text' name='vorname'>";
    col3.innerHTML = "<input type='text' name='gebDat'>";

    document.querySelector('#personen').appendChild(frag);
    // frag.childElementCount ist jetzt 0.
  }

Das Beispiel enthält einen main-Bereich mit einer leeren Personentabelle, und einen Button zum Anlegen neuer Personen

Nach dem Laden der Seite wird auf das DOMContentLoaded-Ereignis reagiert und dem Button mit addEventListener eine click-Funktionalität hinzugefügt.
Wenn Sie nun auf den Button klicken, wird mit document.createDocumentFragment() ein Container für eine neue Tabellenzeile erzeugt und darin ein tr Element und drei td Elemente angelegt. Mittels Zuweisung an innerHTML werden in den Tabellenzellen Eingabefelder erstellt. Die so erzeugte Tabellenzeile wird nun durch Aufruf von appendChild mit einem Aufruf dem DOM hinzugefügt.

Die Methode appendChild() gibt ihr Argument zurück, was im Fall eines DocumentFragment bedeutet, dass damit nichts mehr anzufangen ist - die Elemente darin sind ins DOM verschoben worden.

Weblinks

• W3C: createDocumentFragment
• MDN: Document.createDocumentFragment()