HTML-DOM -innerText- Eigenschaft
Beispiel
Holen Sie sich den inneren Text eines Elements:
var x =
document.getElementById("myBtn").innerText;
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die innerText-Eigenschaft legt den Textinhalt des angegebenen Knotens und aller seiner Nachkommen fest oder gibt ihn zurück .
Wenn Sie die innerText-Eigenschaft festlegen, werden alle untergeordneten Knoten entfernt und durch einen einzelnen Text-Knoten ersetzt, der die angegebene Zeichenfolge enthält.
Hinweis: Diese Eigenschaft ähnelt der Eigenschaft textContent , es gibt jedoch einige Unterschiede:
- textContent gibt den Textinhalt aller Elemente zurück, während innerText den Inhalt aller Elemente mit Ausnahme der Elemente <script> und <style> zurückgibt.
- innerText gibt nicht den Text von Elementen zurück, die mit CSS ausgeblendet sind (textContent wird es tun).
Tipp: Um den HTML-Inhalt eines Elements festzulegen oder zurückzugeben, verwenden Sie die innerHTML- Eigenschaft.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
innerText | 4.0 | 10.0 | 45.0 | 3.0 | 9.6 |
Syntax
Gibt den Textinhalt eines Knotens zurück:
node.innerText
Legen Sie den Textinhalt eines Knotens fest:
node.innerText = text
Eigenschaftswerte
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Technische Details
Rückgabewert: | Ein String, der den "gerenderten" Textinhalt eines Knotens und aller seiner Nachkommen darstellt |
---|
Mehr Beispiele
Beispiel
Dieses Beispiel demonstriert einige der Unterschiede zwischen innerText, innerHTML und textContent:
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
Holen Sie sich den Inhalt des <p>-Elements oben mit den angegebenen Eigenschaften:
innerText gibt zurück: "Dieses Element hat zusätzlichen Abstand und enthält ein span-Element."
innerHTML gibt zurück: "Dieses Element hat zusätzliche Leerzeichen und enthält <span>ein span-Element</span>."
textContent gibt zurück: "Dieses Element hat zusätzlichen Abstand und enthält ein span-Element."
Die innerText-Eigenschaft gibt nur den Text zurück, ohne Leerzeichen und innere Element-Tags.
Die innerHTML-Eigenschaft gibt den Text zurück, einschließlich aller Leerzeichen und inneren Element-Tags.
Die Eigenschaft textContent gibt den Text mit Leerzeichen, aber ohne innere Element-Tags zurück.