JavaScript/DOM/Node/textContent

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Node
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

Anwendungsbeispiel[Bearbeiten]

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.

Unterschied zu innerText und innerHTML[Bearbeiten]

innerText[Bearbeiten]

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 () {
   // Folgende Zeile funktioniert nur im Internet Explorer bis Version 10
   // document.all.meinAbsatz.innerText = Neu;  
   // So ist es standardkonform:
      document.getElementById("meinAbsatz").innerText = Neu;
    }
  </script>
</head>
<body>
  <p id="meinAbsatz">Text</p>
  <a href="javascript:Aendern()">Anderer Text</a>
</body>
</html>
Beachten Sie: Weil innerText mittlerweile Standard ist, funktioniert dieses Beispiel nicht nur im Internet Explorer. Die Eigenschaft document.all war dagegen IE-spezifisch.
Beispiel: Fallback für den IE8
var textinhalt = element.textContent || element.innerText;

Unterschied zu innerHTML[Bearbeiten]

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.

Weblinks[Bearbeiten]