HTML DOM innerText 속성
예시
요소의 내부 텍스트를 가져옵니다.
var x =
document.getElementById("myBtn").innerText;
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
innerText 속성은 지정된 노드의 텍스트 내용 과 모든 하위 항목을 설정하거나 반환합니다 .
innerText 속성 을 설정 하면 모든 자식 노드가 제거되고 지정된 문자열을 포함하는 단일 Text 노드로 바뀝니다.
참고: 이 속성은 textContent 속성과 유사하지만 몇 가지 차이점이 있습니다.
- textContent는 모든 요소의 텍스트 내용을 반환하고 innerText는 <script> 및 <style> 요소 를 제외한 모든 요소의 내용을 반환합니다.
- innerText는 CSS로 숨겨진 요소의 텍스트를 반환하지 않습니다(textContent는 반환).
팁: 요소의 HTML 콘텐츠를 설정하거나 반환하려면 innerHTML 속성을 사용하세요.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| innerText | 4.0 | 10.0 | 45.0 | 3.0 | 9.6 |
통사론
노드의 텍스트 내용을 반환합니다.
node.innerText
노드의 텍스트 내용을 설정합니다.
node.innerText = text
속성 값
| Value | Type | Description |
|---|---|---|
| text | String | Specifies the text content of the specified node |
기술적 세부 사항
| 반환 값: | 노드 및 모든 하위 항목의 "렌더링된" 텍스트 콘텐츠를 나타내는 문자열 |
|---|
더 많은 예
예시
이 예에서는 innerText, innerHTML 및 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>
지정된 속성을 사용하여 위의 <p> 요소의 내용을 가져옵니다.
innerText 반환: "이 요소에는 추가 간격이 있고 스팬 요소가 포함되어 있습니다."
innerHTML 반환: " 이 요소에는 추가 간격이 있고 <span>스팬 요소</span>가 포함되어 있습니다."
textContent 는 다음을 반환합니다. " 이 요소에는 추가 간격이 있고 span 요소가 포함되어 있습니다."
innerText 속성은 공백 및 내부 요소 태그 없이 텍스트만 반환합니다.
innerHTML 속성은 모든 간격 및 내부 요소 태그를 포함하여 텍스트를 반환합니다.
textContent 속성은 간격이 있는 텍스트를 반환하지만 내부 요소 태그는 포함하지 않습니다.