[JavaScript] textContent, innerText, innerHTML 비교

 

아래 템플릿을 이용해서 설명하겠다.

 

1 2 3 4 5 6

<div class="wrap">   This is fruit.   <span>banana</span>   <span>apple</span>   Fruit is delicious. </div>

cs

 

textContent

자기 자신과 자식 태그들의 텍스트 뿐만 아니라 줄바꿈, 띄워쓰기와 같은 스타일링 정보까지 같이 가져온다.

 

예시

document.querySelector('.wrap').textContent;

결과

  This is fruit.
  banana
  apple
  Fruit is delicious.

자기 자신과 자식 태그들의 텍스트 값만 가지고 오지만 스타일링 정보는 제외하고 가져온다.

 

예시

document.querySelector('.wrap').innerText;

결과

This is fruit. banana apple Fruit is delicious.

innerHTML

자시자신은 텍스트 값만, 자식들은 텍스트와 태그 값까지 모두 가져온다.

 

예시

document.querySelector('.wrap').innerHTML;

결과

  This is fruit.
  <span>banana</span>
  <span>apple</span>
  Fruit is delicious.