CSS, HTML & Javascript mit {stil}

Javascript createElement, createTextNode, createAttribute

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

Javascript createElement / createTextNode

Neue Elemente erzeugen

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 (tagName)
  • createTextNode (data)
  • createDocumentFragment ()
  • createAttribute (name)
  • createComment (data)

createElement ()

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

const p = document.createElement('p');
p.innerText = "Ich bin der Neue";

Der Typ des Elementknotens wie p, img, form, … wird als String übergeben. Ein neu erzeugter Elementknoten muss noch an eine Stelle Dokument eingehangen werden. Dafür steht heute ein gutes halbes Dutzend Methoden zur Verfügung.

  • appendChild () – Einfügen als letztes Child Element,
  • insertAdjacentElement (), Einfügen als Sibling vor oder nach einem Element oder als ersten / letzten Kindknoten c(hild Node).
  • append () – fügt ein oder mehrere Element-Knoten oder Elemente als HTML-String ein,
  • replaceChild() – ersetzt ein vorhandenes Kind-Element,
  • replaceWith – ersetzt einen Elementknoten,
  • before (), after () fügt Elemente vor oder nach einem Element ein,
  • insertBefore () – fügt Elemente als Kind-Elemente an eine bestimmte Position des Parent Node ein.

createTextNode ()

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

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

Allerdings

Eine wenig bekannte Alternative für das Einhängen neuer und komplexer Elemente ist ein Script-Tag mit type="text/template".

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.

create document fragment
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.

const 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-2021 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.

Suchen auf mediaevent.de