JavaScript/DOM/Document/createTextNode

Die Methode Document.createTextNode() erzeugt einen neuen Textknoten für den Elementenbaum; lässt sich auf HTML-, aber auch auf XML-Dokumente anwenden.

Syntax

let text = document.createTextNode(data);

• text: ein neuer Textknoten
• data: Zeichenkette, die in den Textknoten eingefügt werden kann

Anwendungsbeispiel

Beispiel ansehen …

  function init() {
	let button = document.getElementById('button');
	button.addEventListener('click', erzeugeZeitStempel);
  }

  function erzeugeZeitStempel() {
    let zeitstempeltext = document.createTextNode(document.lastModified),
        textZuvor = document.createTextNode('Datum des letzten Updates: ');
    document.getElementById('absatz').appendChild(textZuvor);
    document.getElementById('absatz').appendChild(zeitstempeltext);
  }

Das Beispiel enthält einen p-Absatz, der zunächst leer ist.

Bei einem Klick auf den Button wird die Funktion erzeugeZeitStempel() aufgerufen.

Dort wird mit document.createTextNode() zwei neue Zeichenketten erzeugt, einmal der gespeicherte Wert von lastModified, und einmal ein statischer Text. Die Texte werden damit aber noch nicht angezeigt - sie sind auch noch nicht in den Elementenbaum des Dokuments eingehängt. Die Textknoten sind lediglich als Objekt erzeugt.
Die Methode createTextNode() gibt das erzeugte Objekt zurück. Der Rückgabewert wird in den beiden Beispielaufrufen in den Variablen zeitstempeltext und textZuvor gespeichert. Über diese Variablen sind die neu erzeugten Textknoten von da ab ansprechbar.

Mit appendChild() werden dann die Textknoten als Kindelemente des über dem JavaScript notierten Textabsatzes definiert. Dazu wird mit getElementById() auf das p-Element zugegriffen. Der leere Absatz erhält somit dynamisch einen Inhalt.

Weblinks

• W3C: createTextNode
• MDN: Document.createTextNode