JavaScript/DOM/Node/textContent

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft Node.textContent liest und speichert den Textinhalt eines HTML-Elements und aller Kindelemente. Sie können den Inhalt dynamisch ändern.

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

Syntax

var text = element.textContent;

  • text: Text wird ausgelesen und der Variable text zugewiesen

element.textContent = text

Inhalt wird durch den in der Variable text gespeicherten Text ersetzt

Inhaltsverzeichnis

[Bearbeiten] Anwendungsbeispiel

Beispiel ansehen …
  function auswerten() { 
    var liste = document.getElementById('liste'),
	text = liste.textContent;
    document.getElementById('ausgabe').textContent = text;  
  }
Das Beispiel enthält eine Liste und einen Button. Beim Anklicken des Buttons wird die Funktion auswerten() aufgerufen.
Diese Funktion liest mit textContent den Textinhalt der Liste aus und weist ihn der Variablen text zu. Dieser Text wird dann mit textContent in den unteren Absatz geschrieben. Der Inhalt des Absatzes ändert sich dann dynamisch.

[Bearbeiten] Unterschied zu innerText und innerHTML

[Bearbeiten] innerText

Microsoft führte mit dem document.all-Objekt die Eigenschaft innerText ein. Diese wurde von allen anderen Browsern implementiert und 2016 in den Standard übernommen.

  • DOM 1.0
  • JScript
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera

Syntax

var text = element.innerText;

  • text: Text wird ausgelesen und der Variable text zugewiesen

element.innerText = text

Inhalt wird durch den in der Variable text gespeicherten Text ersetzt

Beispiel
<!doctype html>
<html>
<head>
  <title>Test</title>
  <script>
    var Neu = "neuer Text";
    function Aendern () {
      document.all.meinAbsatz.innerText = Neu;
    }
  </script>
</head>
<body>
  <p id="meinAbsatz">Text</p>
  <a href="javascript:Aendern()">Anderer Text</a>
</body>
</html>
Beachten Sie: Dieses Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft innerText.
Beispiel: Fallback für den IE8
var textinhalt = element.textContent || element.innerText;

[Bearbeiten] Unterschied zu innerHTML

Mit der Eigenschaft innerHTML wird neben dem Textinhalt auch HTML-Code ausgegeben, bzw. verändert.

Empfehlung: Verwenden Sie textContent oder innerText, wenn Sie reine Textinhalte verändern wollen. Dadurch, dass keine HTML-Elemente erzeugt werden müssen, ist dies performanter. Darüber hinaus verhindert man so potentielle XSS-Angriffe.

[Bearbeiten] Weblinks


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML