Javascript createElement, createTextNode, createAttribute

create Element – neues HTML-Element erzeugen – und create Text Node Ein Zauberstab mit grüner Schlinge und Edelsteinkopf

Javascript createElement und createTextNode erzeugen neue Elemente im leeren Raum – ohne jegliche Verbindung zum Dokument. Erst insertBefore() und replaceChild() hängen die Elemente den den DOM-Baum.

createDocumentFragment erzeugt eine Baumstruktur abseits vom Document Object, um eine ganze Gruppe von Knoten in einem Zug in das DOM einzufügen.

Das document-Objekt stellt das gesamte Dokument dar und ist der oberste Knoten des DOM-Baums. Da außerhalb des Document-Objekts keine Elemente existieren können, enthält das Document-Objekt die Methoden zur Erzeugung neuer Elemente.

createElement()

Javascript createElement(tagName) erzeugt ein neues Element node vom Typ tagName.

let newP = document.createElement('p');

Der Typ des Elementknotens wie p, img, form, … wird als String übergeben. Der neu erzeugte Knoten wird erst durch eine Anweisung wie insertAdjacentElement, replaceChild oder appendChild tatsächlich in das Dokument eingefügt.

Wenn nicht einzelne Elemente, sondern gleich ein ganzer Teilbaum ins Dokument eingehangen werden, kann cloneNode den Prozess effizienter gestaltent.

createTextNode()

Javascript createTextNode(data) erzeugt einen Textknoten. Der Parameter data ist der String für den Inhalt des Textknotens.

let newTextNode = document.createTextNode('Ein bisschen Text muss sein');

Das Erzeugen und Einfügen von neuen Knoten im HTML-Dokument ist mäßig intuitiv, aber auch »schwatzhaft« – verbose –, soll heißen, da gibt es viel zu tippen.

<div id="end"></div>
<script>
   let p = document.createElement('p');
   p.appendChild(document.createTextNode('Hello, '));

   let em = document.createElement('em');
   em.appendChild(document.createTextNode('World'));
   p.appendChild(em);

   p.appendChild(document.createTextNode('!'));
   document.getElementById('end').appendChild(p);
</script>

Das Script braucht 7 Zeilen, um zwei neue Knoten einzufügen. An vielen Stellen ist innerHTML effizienter.

createDocumentFragment()

Javascript createDocumentFragment() erzeugt einen Teilbaum, der in das Dokument eingefügt werden kann. createDocumentFragment() hat keinen Parameter.

Das Fragment muss kein wohlgeformtes XML bzw. HTML enthalten – ein DocumentFragment kann aus einem einfachen einsamen Textknoten bestehen –, stellt aber alle Eigenschaften und Methoden des Node-Objekts zur Verfügung.

Dahinter steckt, dass jeder Einbau eines dynamisch mit Javascript erzeugten Objekts den Browser zu einem neuen Arrangement der Seite zwingen kann. Da ist es effizienter, neu erzeugte Elemente zuerst in einem Fragment zusammenzubauen, um das Fragment als Ganzes in das Dokument einzubinden.

Javascript Dom: documentFragment
Mit createDocumentFragment erzeugt das Script nur einen einmaligen Neuaufbau der Seite – die Seite muss nicht bei jedem einzelnen Element neu gerendert werden.

Am Ende setzt target.appendChild(fragment) das Fragment in den Baum ein. Das DocumentFragment löst sich dabei auf und taucht selber nicht im Dokument auf.

let elems = ['img1.jpg', … 'img6.jpg'];
let fragment = document.createDocumentFragment();

for (let i=0; i<elems.length; i++) {
   let newNode = document.createElement('img');
   newNode.setAttribute('src', elems[i]);
   fragment.appendChild(newNode);
}

target.appendChild(fragment);

createAttribute()

erzeugt ein Attribut-Objekt mit dem Namen name.

Anders als setAttribute() erzeugt createAttribut() ein Attribut ohne Wert. Der Wert muss später durch setAttribute() gesetzt werden. Ein Attribut, das mit Javascript createAttribute() erzeugt wurde, hat kein parentNode, bis es durch setAttribute() in ein Element eingefügt wird.

So umständlich – da ist es sinnvoller, das Attribut direkt durch setAttribute zu setzen. In diesem Sinne steht zur Debatte, ob createAttribute mit DOM4 fällt.

XML Nodes (SVG, MathML) erzeugen

Die Datei-Namensendung mit dem Punkt und drei folgenden Buchstaben kann unterschiedliche Medien nicht wirklich sauber voneinander unterscheiden. XML NameSpace benutzt anstelle dessen URIs – lange Zeichenketten wie xmlns="//www.w3.org/2000/svg" – und kurze Prefixe, um mehrere Arten von XML-Dokumenten in einem Dokument zusammenzuführen.

SVG und MathML sind z.B. zwei Arten von XML-Dokumenten mit eigenem NameSpace. SVG benutzt manchmal zudem XLink – das hat seinen eigenen Namensraum. Javascript fügt sowohl SVG- als auch MathML-Elemente ein.

  • createElementNS (namespaceURI, qualifiedName)
  • createAttributeNS (namespaceURI, qualifiedName)

Um ein SVG-Element mit Javascript in das HTML einzusetzen, wird also document.createElementNS() benutzt.

let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('viewBox','0 0 1122 255');
svg.setAttribute('width','100%');
svg.setAttribute('height','100%');
svg.innerHTML = '<rect width="252" height="252" rx="16" x="0" y="0" fill="silver" />';

XML createCDATASection()

Javascript createCDATASection(data) erzeugt einen CDATA-Bereich im Dokument mit dem Inhalt des Parameters data.

  • createEntityReference (name)
  • createCDATASection (data)
  • createProcessingInstruction (target, data)

Die Methode ist XML-Dokumenten vorbehalten. In HTML-Dokumenten steht anstelle dessen die Methode createComment() zur Verfügung. In HTML darf eine CDATASection also nicht angezeigt werden.

let cdata = document.createCDATASection('© 2017 mediaevent.de');

XML: createProcessingInstruction(target, data)

Javascript createProcessingInstruction(target, data) erzeugt eine Ausführungsanweisung. Eine ProcessingInstruction besteht aus einem Ziel target und dem Inhalt data.

Typische Processing Instructions sind z.B.

  +-- Ziel
  |
  v 
<?php echo 'Hallo Welt'; ?>
      ^                ^
      |                |
      +----- data -----+

oder

<?xml version="1.0"?>

target ist das erste Token nach dem Tag, data ist der Text ab dem ersten Non-Whitespace-Zeichen bis zum letzten Zeichen von dem schliessenden '?>', das die Direktive beendet.

let pi = document.createProcessingInstruction('php', 'echo "Hallo Welt";');

createComment()

Javascript createComment(data) erzeugt einen Kommentar.

Im Grunde genommen läuft das Erzeugen eines neuen Kommentars nicht anders als das Erzeugen eines Textknotens. Nur der Nachweis, dass der Kommentar tatsächlich erzeugt und eingefügt wurde, bleibt der Console vorbehalten, denn der Kommentar ist auch im Quelltext der HTML-Datei nicht sichtbar.

document.getElementById('createComment').onclick = function() {
   let newComment = document.createComment('© 2002-2016 mediaevent.de');
   let target = document.getElementById('createComment');
   target.parentNode.insertBefore(newComment, target.nextSibling);
}

In der Browser-Console wird der eingefügte Kommentar auch tatsächlich angezeigt.