JavaScript/DOM/Node/textContent

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Node(Weitergeleitet von TextContent)
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.

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]

Ein formaler Unterschied ist, dass textContent auf der Node-Schnittstelle definiert ist, also nicht nur für Elemente im DOM gilt. Für einen AttributeNode enthält textContent beispielsweise den Attributwert.

Dagegen ist innerHTML eine Eigenschaft der Element-Schnittstelle und gilt damit für HTML- und XML-Elementknoten (XML-Elementknoten könnten beispielsweise Kindelemente eines SVG-Elements sein). Auch wenn der Name anderes suggeriert: In einem XML-Dokument liefert innerHTML das XML Markup in einem Elementknoten.

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. innerText ist eine Eigenschaft, die auf der Schnittstelle HTMLElement definiert ist, und damit nicht für XML-Elemente verfügbar!

Syntax

var text = htmlElement.innerText;

  • text: Text wird ausgelesen und der Variable text zugewiesen

htmlElement.innerText = text

Der Inhalt des Elements wird durch den in der Variable text gespeicherten Text ersetzt. Wenn das Element zuvor Kind-Elemente enthielt, werden sie entfernt.

Beispiel
<!doctype html>
<html>
<head>
  <title>Test</title>
  <script>
    var Neu = "neuer Text";
    function Aendern () {
      document.getElementById("meinAbsatz").innerText = Neu;
    }
  </script>
</head>
<body>
  <p id="meinAbsatz">Text</p>
  <a href="javascript:Aendern()">Anderer Text</a>
</body>
</html>
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]