HTML DOM innerText- eigenschap
Voorbeeld
Haal de binnentekst van een element op:
var x =
document.getElementById("myBtn").innerText;
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
Met de eigenschap innerText wordt de tekstinhoud van het opgegeven knooppunt en alle onderliggende knooppunten ingesteld of geretourneerd .
Als u de eigenschap innerText instelt, worden alle onderliggende knooppunten verwijderd en vervangen door een enkel tekstknooppunt dat de opgegeven tekenreeks bevat .
Opmerking: deze eigenschap is vergelijkbaar met de eigenschap textContent , maar er zijn enkele verschillen:
- textContent retourneert de tekstinhoud van alle elementen, terwijl innerText de inhoud van alle elementen retourneert, behalve de elementen <script> en <style>.
- innerText retourneert niet de tekst van elementen die verborgen zijn met CSS (textContent wel).
Tip: Gebruik de eigenschap innerHTML om de HTML-inhoud van een element in te stellen of te retourneren .
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
innerText | 4.0 | 10.0 | 45.0 | 3.0 | 9.6 |
Syntaxis
Retourneer de tekstinhoud van een knooppunt:
node.innerText
Stel de tekstinhoud van een knooppunt in:
node.innerText = text
Eigendomswaarden
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Technische details
Winstwaarde: | Een tekenreeks, die de "gerenderde" tekstinhoud van een knooppunt en al zijn afstammelingen vertegenwoordigt |
---|
Meer voorbeelden
Voorbeeld
Dit voorbeeld demonstreert enkele van de verschillen tussen innerText, innerHTML en 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>
Haal de inhoud van het bovenstaande <p>-element op met de opgegeven eigenschappen:
innerText geeft als resultaat: "Dit element heeft extra spatiëring en bevat een span-element."
innerHTML geeft als resultaat: " Dit element heeft extra spatiëring en bevat <span>een span-element</span>."
textContent retourneert: " Dit element heeft extra spatiëring en bevat een span-element."
De eigenschap innerText retourneert alleen de tekst, zonder spatiëring en tags voor innerlijke elementen.
De eigenschap innerHTML retourneert de tekst, inclusief alle spaties en tags voor innerlijke elementen.
De eigenschap textContent retourneert de tekst met spatiëring, maar zonder tags voor innerlijke elementen.