[JavaScript] innerText, innerHTML, textContent 비교분석

정민구·2023년 10월 12일

서론

바닐라 자바스크립트를 사용할 때 종종 DOM 요소의 텍스트를 변경해야 할 일이 있다.
innerText, innerHTML, textContent는 위 작업을 가능하게해주는 프로퍼티이다.

사용법

예시코드

<body>
    <button id="inner-text"></button>
    <button id="inner-html"></button>
    <button id="text-content"></button>
    <script>
      const $innerText = document.getElementById("inner-text");
      const $innerHTML = document.getElementById("inner-html");
      const $textContent = document.getElementById("text-content");

      $innerText.innerText = "<h1>innerText</h1>";
      $innerHTML.innerHTML = "<h1>innerHTML</h1>";
      $textContent.textContent = "<h1>textContent</h1>";
    </script>
  </body>

실행화면

뭔가 차이점이 보인다. innerHTML를 사용한 버튼만 다른 스타일을 가지고 있다.

innerText, textContent 와 달리 innerHTML을 사용한 경우 요소의 내부 HTML 마크업을 가져올 수 있다.

그렇다면 innerText와 textContent의 차이는???

innerText는 Element의 객체 프로퍼티이고, textContent는 Node의 객체프로퍼티이다.
DOM트리를 잠시 살펴보도록 하자.

DOM트리에서 Node가 Element의 상위 계층이다.
이로 인해 textContent는 DOM 트리에서 광범위하게 사용할 수 있다.
Element에는 포함되지 않지만 Node에 포함되는 대표적인 요소로 Text와 Comment가 있다.
물론, Node가 Element의 상위계층이라고 해서 Node가 Element의 모든 기능을 포함하고 있지는 않다.
대표적으로 Element는 스타일링과 레이아웃을 위한 프로퍼트와 메서드를 제공하지만, Node에서는 스타일링과 레이아웃과 관련된 정보를 포함하고 있지 않다.

innerText는 스타일링과 레이아웃을 고려한 텍스트를 반환한다.
textContent는 텍스트 데이터만을 다룬다.

예시코드

<body>
    <span id="string">
      <span style="display: none">display: none을 준 상태</span>
    </span>

    <div id="inner-text"></div>
    <div id="text-content"></div>

    <script>
      const $string = document.getElementById("string");
      const $innerText = document.getElementById("inner-text");
      const $textContent = document.getElementById("text-content");

      $innerText.innerText = `innerText:  ${$string.innerText}`;
      $textContent.innerText = `textContent:  ${$string.textContent}`;
    </script>
  </body>