Właściwość wewnętrznego tekstu HTML DOM
Przykład
Uzyskaj wewnętrzny tekst elementu:
var x =
document.getElementById("myBtn").innerText;
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość innerText ustawia lub zwraca zawartość tekstową określonego węzła i wszystkich jego potomków .
Jeśli ustawisz właściwość innerText, wszystkie węzły podrzędne zostaną usunięte i zastąpione pojedynczym węzłem Text zawierającym określony ciąg.
Uwaga: ta właściwość jest podobna do właściwości textContent , istnieją jednak pewne różnice:
- textContent zwraca zawartość tekstową wszystkich elementów, podczas gdy innerText zwraca zawartość wszystkich elementów, z wyjątkiem elementów <script> i <style>.
- innerText nie zwróci tekstu elementów, które są ukryte za pomocą CSS (zwróci textContent).
Wskazówka: Aby ustawić lub zwrócić zawartość HTML elementu, użyj właściwości innerHTML .
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
innerText | 4.0 | 10.0 | 45.0 | 3.0 | 9.6 |
Składnia
Zwróć zawartość tekstową węzła:
node.innerText
Ustaw zawartość tekstową węzła:
node.innerText = text
Wartości nieruchomości
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Szczegóły techniczne
Wartość zwrotu: | String, reprezentujący „wyrenderowaną” zawartość tekstową węzła i wszystkich jego potomków |
---|
Więcej przykładów
Przykład
Ten przykład ilustruje niektóre różnice między innerText, innerHTML i 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>
Pobierz zawartość elementu <p> powyżej z określonymi właściwościami:
innerText zwraca: „Ten element ma dodatkowe odstępy i zawiera element span”.
innerHTML zwraca: " Ten element ma dodatkowe odstępy i zawiera <span>element span</span>."
textContent zwraca: " Ten element ma dodatkowe odstępy i zawiera element span."
Właściwość innerText zwraca tylko tekst, bez odstępów i znaczników elementów wewnętrznych.
Właściwość innerHTML zwraca tekst, w tym wszystkie znaczniki odstępów i elementów wewnętrznych.
Właściwość textContent zwraca tekst z odstępami, ale bez wewnętrznych znaczników elementów.