JavaScript/DOM/Document/createTextNode

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

  • DOM 1.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Syntax

var text = document.createTextNode(data);

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

[Bearbeiten] Anwendungsbeispiel

Beispiel ansehen …
  function init() {
	var button = document.getElementById('button');
	button.addEventListener('click', erzeugeZeitStempel);
  }
 
  function erzeugeZeitStempel() {
    var 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 holeZeitstempel() 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.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML