HTMLElement.innerText

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTMLElement 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.

참고: innerTextNode.textContent와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다.

구문

js
const renderedText = htmlElement.innerText;
htmlElement.innerText = string;

요소의 렌더링 된 텍스트 콘텐츠를 나타내는 DOMString. 요소 자체가 렌더링 중이 아니라면 Node.textContent 속성의 값과 동일합니다.

예제

다음 예제는 innerTextNode.textContent를 비교합니다. innerText<br> 태그를 인식하고, 숨겨진 요소를 무시하는 점에 주목하세요.

HTML

html
<h3>원본 요소:</h3>
<p id="source">
  <style>
    #source {
      color: red;
    }
  </style>
  아래에서<br />이 글을<br />어떻게 인식하는지 살펴보세요.
  <span style="display:none">숨겨진 글</span>
</p>
<h3>textContent 결과:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
<h3>innerText 결과:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>

JavaScript

js
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");

textContentOutput.innerHTML = source.textContent;
innerTextOutput.innerHTML = source.innerText;

결과

명세

Specification
HTML
# the-innertext-idl-attribute

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
innerText
Can be set with TrustedScript instances in HTMLScriptElement.

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
User must explicitly enable this feature.

같이 보기