HTMLElement: innerText-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2016.
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 die Inhalte des Elements mit dem Cursor markiert und dann in die Zwischenablage kopiert.
Als Setter ersetzt sie die Kinder des Elements mit dem angegebenen Wert und konvertiert dabei alle Zeilenumbrüche in <br>-Elemente.
Hinweis:
innerText wird leicht mit Node.textContent verwechselt, aber es gibt wichtige Unterschiede zwischen den beiden.
Grundsätzlich ist innerText sich des gerenderten Erscheinungsbildes von Text bewusst, während textContent dies nicht ist.
Wert
Ein String, der den gerenderten Textinhalt eines Elements darstellt.
Wenn das Element selbst nicht gerendert wird (zum Beispiel, wenn es vom Dokument getrennt oder aus der Sicht 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 angegebenen String-Wert.
Beispiele
Dieses Beispiel vergleicht innerText mit Node.textContent.
Beachten Sie, wie innerText sich bewusst ist über Dinge wie <br>-Elemente und versteckte Elemente ignoriert.
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="18" cols="40" readonly>…</textarea>
<h3>Result of innerText:</h3>
<textarea id="innerTextOutput" rows="6" cols="40" 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 |
Browser-Kompatibilität
Loading…