HTMLElement: Eigenschaft innerText

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

* Some parts of this feature may have varying levels of support.

Die innerText-Eigenschaft des HTMLElement-Interfaces repräsentiert den gerenderten Textinhalt eines Knotens und seiner Nachkommen.

Als Getter approximiert sie den Text, den der Benutzer erhalten würde, wenn er den Inhalt des Elements mit dem Cursor markierte und dann in die Zwischenablage kopierte. Als Setter wird dies die Kinder des Elements durch den gegebenen Wert ersetzen, wobei jegliche Zeilenumbrüche in <br>-Elemente umgewandelt werden.

Hinweis:>innerText wird leicht mit Node.textContent verwechselt, aber es gibt wichtige Unterschiede zwischen den beiden. Grundsätzlich ist innerText sich des gerenderten Erscheinungsbildes des Textes bewusst, während textContent dies nicht ist.

Wert

Ein String, der den gerenderten Textinhalt eines Elements repräsentiert.

Wenn das Element selbst nicht gerendert wird (zum Beispiel, wenn es vom Dokument getrennt oder vor der Ansicht verborgen ist), ist der zurückgegebene Wert derselbe wie die Node.textContent-Eigenschaft.

Warnung: Das Setzen von innerText auf einem Knoten entfernt alle Kinder des Knotens und ersetzt sie durch einen einzelnen Textknoten mit dem gegebenen String-Wert.

Beispiele

Dieses Beispiel vergleicht innerText mit Node.textContent. Beachten Sie, wie innerText sich Dinge wie <br>-Elemente bewusst ist und versteckte Elemente ignoriert.

HTML

html

<h3>Source element:</h3>
<p id="source">
  <style>
    #source {
      color: red;
    }
    #text {
      text-transform: uppercase;
    }
  </style>
  <span id="text">
    Take a look at<br />
    how this text<br />
    is interpreted below.
  </span>
  <span style="display:none">HIDDEN TEXT</span>
</p>
<h3>Result of textContent:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>…</textarea>
<h3>Result of innerText:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>…</textarea>

JavaScript

const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");

textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;

Ergebnis

Spezifikationen

Specification
HTML # the-innertext-idl-attribute