[JavaScript] innerHTML, innerText, textContent 의 차이

자바스크립트로만 테이블 목록을 생성하는 프로젝트를 진행하는 과정에서 궁금증이 생겨 정리하게 되었다

각각 어떻게 동작하며, 차이점은 무엇인지 알아보게 되었다

지금은 Node => Element => HTMLElement 라고만 이해하고 넘어가자

innerHTML

MDN 에서는 "element 의 속성이며, 요소(element) 내에 포함된 HTML 혹은 XML 마크업을 가져오거나 설정한다" 고 설명한다

항상 그렇듯이 문장만으로는 내가 이해할 수 없었다

const text = document.createElement('div');
text.innerHTML = '<p>안녕하세요<p>';
// 안녕하세요 출력
text.innerHTML = '';
// 아무것도 없다

즉, 생성한 div 요소에 해당 html을 설정해서 관리자도구로 확인하면 아래처럼 보이게 된다

<div>
  <p>안녕하세요</p>
</div>

innerHTML 을 이용하면 js를 통해 내부 html 정보를 쉽게 바꿀 수 있게 되는 것

innerText

MDN 에서는 "HTMLElement 의 속성이며 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타낸다" 고 설명한다

👉 중요한 점은 사람이 읽을 수 있는 텍스트를 사람이 읽을 수 있게 보여주는데 사용된다는 것 👈

첫 번째, innerText 를 통해 html 파일의 특정 부분을 보여주는 과정을 살펴보자

<div id="test">
    안녕하세요<br>이건<br>innerText입니다
	<span style="display:none">숨겨져 있어요</span>
</div>
<textarea id="testcode" rows="3"></textarea>

위와 같이 되어있는 html 에 아래의 js 코드를 적용하면 어떻게 될까

const testTag = document.getElementById('testcode')
const innerTextResult = document.getElementById('test');
testTag.innerHTML = innerTextResult.innerText

innerText 는 사람이 읽을 수 있게 되어 있는 안녕하세요 ~ 입니다 부분만 화면에 보여주는데, 사람이 읽을 수 있게 <br> 태그도 인식하여 줄바꿈을 해놓는다

두 번째, innerText 를 이용해 element 요소에 텍스트를 추가해보자

<p>아래는 html에 innerText를 사용해보는 예시입니다!<p>
<div id="test"><div>

이렇게 구성되어 있는 div 태그에 아래의 js 코드를 적용하면 어떻게 될까

const test = document.getElementById("test")
test.innerText = `
  <span>안녕<span>
  <span>하세요<span>
`

문자열로 인식되는 것이 두 줄 전체이므로, 화면에서도 저것과 똑같이 줄바꿈까지 나오게 된다

즉, 문자열 자체가 현재 사람이 읽을 수 있는 텍스트이므로 그대로 줄바꿈까지 된 내용이 화면에 보이게 되는 것

textContent

MDN 에서는 "Node 의 속성이며 노드와 그 자손의 텍스트 콘텐츠를 표현한다" 고 설명한다

즉, 선택한 노드의 텍스트 항목으로 해당되는 것은 모두 가져온다

따라서 innerText 가 <br> 태그를 인식해 줄바꿈 하는 것과 반대로 태그 종류에 상관없이 텍스트 요소인 것들은 모두 가져온다

<div id="test">
  	<style>#source { color: red; }</style>
    안녕하세요<br>이건<br>innerText입니다
	<span style="display:none">숨겨져 있어요</span>
</div>
<textarea id="testcode" rows="3"></textarea>

이렇게 구성되어 있는 div 태그에 아래의 js 코드를 적용하면 어떻게 될까

const testTag = document.getElementById('testcode')
const innerTextResult = document.getElementById('test');
testTag.innerHTML = innerTextResult.textContent

실제 읽을 수 있는지 여부에 상관없이, 텍스트에 해당하는 것들이 모두 일렬로 나열되게 된다.

특히, <br> 태그도 인식하지 않고 띄어쓰기는 오직 태그의 총 수만큼만 이루어지게 된다

종합하며

생각보다 각 종류를 처음에 이해하는데 힘들었다

코드를 직접 구성해보며 차이를 비교하니 이해를 어느정도 할 수 있었고, 나중에도 잘 기억해낼 수 있게 정리해놓길 잘했다는 생각이 들었다

쉽게 헷갈리고 까먹기 쉬운 부분이라 주기적으로 확인해봐야겠다