CSS, HTML und Javascript mit {stil}

Javascript createElement, createTextNode, createAttribute

Javascript createElement, createTextNode, createDocumentFragment

Javascript createElement und createTextNode erzeugen Nodes im leeren Raum – ohne jegliche Verbindung zum Dokument. Erst insertBefore() und replaceChild() hängen die Knoten 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 Knoten existieren können, enthält das Document-Objekt die Methoden zur Erzeugung neuer Knoten (die im objektorientierten Jargon auch als »Fabrikmethoden« bezeichnet werden).

  • createElement (tagName)
  • createTextNode (data)
  • createDocumentFragment ()
  • createAttribute (name)
  • createComment (data)

createElement()

Javascript createElement(tagName) erzeugt einen neuen Node node vom Typ tagName.

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

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

createTextNode()

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

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

Das Erzeugen und Einfügen von neuen Knoten im HTML-Dokument ist intuitiv, aber auch »schwatzhaft« – verbose.

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

   var 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.

Mit createDocumentFragment erzeugt das Script nur einen Neuaufbau der Seite.

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.

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

for (var i=0; i<elems.length; i++) {
   var 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 bettet sowohl SVG als auch MathML in HTML ein.

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

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

var 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.

var cdata = document.createCDATASection('© 2016 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.

var 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() {
   var newComment = document.createComment('© 2002-2016 mediaevent.de');
   var target = document.getElementById('createComment');
   target.parentNode.insertBefore(newComment, target.nextSibling);
}

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