HTMLElement.innerText

innerText 속성은
랜더링된 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

해당 요소 내에 자손이 있다면 자손 태그는 무시하고 텍스트 콘텐츠만 처리합니다.

구문

JavaScript 
/* 가져오기 */
const renderedText = htmlElement.innerText;

/* 설정하기 */
htmlElement.innerText = string;

값

innerText 속성은 랜더링된 HTML 요소의 텍스트 콘텐츠를 가져만 반환합니다.

다음의 경우에는 텍스트를 가져올 수 없습니다.

  • 해당 요소 자체가 CSS의 visibility: hidden으로 화면에 숨겨진 요소의 텍스트
  • 해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의 visibility: hidden으로 화면에 숨겨진 요소의 텍스트, 또는 hidden 속성으로 화면에 숨겨진 요소의 텍스트
  • 해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의 display: none으로 화면에 숨겨진 요소의 텍스트

하지만, 해당 요소 자체가 랜더링되지 않은 상태(CSS의 display: none, 또는 hidden 속성으로 화면에서 숨겨진 요소)는 텍스트를 가져올 수 있습니다.

요소에 hidden 속성이 지정되면 브라우저는 해당 요소를 display: none으로 처리합니다.

잠시만!
innerText는 textContent와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다.
주의할 점을 참고하세요!

예제

innerText 속성으로 HTML 요소의 텍스트를 가져오거나 설정하는 예제입니다.

HTML 
<p id="a">환영합니다!</p>
JavaScript 
const ele = document.getElementById("a");
console.log(ele.innerText); // "환영합니다!"

만약 해당 요소가 비어있으면, 빈 문자열(")을 반환합니다.

HTML 
<p id="a"></p>
JavaScript 만약 해당 요소가 비어있으면, 빈 문자열(")을 반환합니다. 
const ele = document.getElementById("a");
console.log(ele.innerText); // ""

innerText 속성을 사용하면 해당 요소와 그 자손 요소들에 포함된 모든 텍스트 내용을 가져옵니다. 이때 자손 태그는 무시합니다.

HTML 
<div id="container"><p>반갑습니다!</p></div>
JavaScript 
const container = document.getElementById("container");
console.log(container.innerText); // "반갑습니다!"

해당 요소 자체가 CSS의 visibility: hidden으로 화면에 숨겨진 요소의 텍스트는 가져오지 못합니다.

HTML 
<div id="hidden-element" style="visibility: hidden;">
    숨겨진 텍스트
</div>
JavaScript 
const hiddenElement = document.getElementById("hidden-element");
console.log(typeof hiddenElement.innerText); // ""

해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의 visibility: hidden으로 화면에 숨겨진 요소의 텍스트, 또는 hidden 속성으로 화면에 숨겨진 요소의 텍스트는 가져오지 못합니다.

또한, 해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의 display: none으로 화면에 숨겨진 요소의 텍스트도 가져오지 못합니다.

HTML 
<div id="hidden-element">
    div 텍스트
    <span style="display: none;">숨겨진 텍스트</span>
    <span style="visibility: hidden;">숨겨진 텍스트</span>
    <span hidden>숨겨진 텍스트</span>
</div>
JavaScript 
const hiddenElement = document.getElementById("hidden-element");
console.log(hiddenElement.innerText); // "div 텍스트"

텍스트 설정하기

innerText 속성을 사용하면 해당 요소의 텍스트 내용을 설정합니다.
새로운 텍스트로 설정할 경우, 요소의 기존 자식 요소나 텍스트는 모두 삭제되고 새 텍스트로 대체됩니다.

HTML 
<p id="a"><strong>중요:</strong> 환영합니다!</p>
<button type="button" id="btn">텍스트 내용을 설정</button>
JavaScript 
const ele = document.getElementById("a");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    ele.innerText = "반갑습니다!";
});
실제 적용된 모습 '버튼'을 실제로 클릭해 보세요!

공백 문자(Whitespace) 처리

공백 문자(Whitespace):
문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 의미합니다. 일반적으로는 '띄어쓰기'라고 부릅니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈이 있습니다.

innerText 속성은 요소 내의 모든 텍스트 콘텐츠를 있는 그대로 반환하거나 설정합니다. 따라서 공백 문자(Whitespace)도 중요한 부분으로 다루어지며, 공백이나 줄바꿈이 포함된 텍스트도 그대로 유지됩니다.

모든 공백 유지

innerText 속성은 요소 내의 텍스트에서 공백, 탭, 줄바꿈을 포함한 모든 공백 문자를 그대로 가져옵니다.

HTML 
<div id="example">
    Hello,    world!
    This is a test.
</div>
<script>
    let text = document.getElementById("example").innerText;
    console.log(text);
    /* 출력:
            Hello,    world!
            This is a test.   
    */
</script>

위 예시에서 보듯, HTML 요소에 포함된 여러 개의 공백이나 줄바꿈은 innerText를 통해 그대로 가져옵니다.

설정 시 공백 포함

innerText를 설정할 때 공백 문자를 포함해도 그대로 적용됩니다. 예를 들어, 여러 줄의 텍스트나 공백을 포함한 텍스트를 innerText로 설정하면 HTML 요소에 그대로 반영됩니다.

JavaScript 
let element = document.getElementById('example');
element.innerText = `
    Hello,    world!
    This is a test.
`; // 공백과 줄바꿈 포함

innerText 속성은 다음과 같은 이유로 사용하지 않는 것이 좋습니다.

  • innerText 속성은 CSS에 따라 결과가 달리질 수 있습니다. innerText 속성은 랜더링된 HTML 요소의 텍스트를 가져만 반환합니다.
  • innerText 속성은 CSS를 고려하기 때문에 최신의 CSS 계산된 값을 반영하기 위해 느립니다.

참고로, innerText 속성과 유사한 기능을 가진 textContent 속성이 있습니다. 이 속성은 CSS를 고려하지 않아도 되는 장점이 있습니다.

브라우저 호환성

innerText 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
innerText 1 12 45 1

명세서

innerText 속성의 명세서 사양
명세서 사양
innerText DOM Standard
#the-innertext-idl-attribute

참고문헌

같이 보기