DOM 조작할 때 무심코 사용하는 innerHTML, innerText, textContent. 이름은 비슷한데 작동 방식은 미묘하게 다르다.
아래의 간단한 예제를 통해 이 차이를 명확히 이해해보자.

예제 코드

<div id='content'>
  안녕~ 
  <span style='display:none'>innerText는 나를 볼 수 없어😏</span>
</div>

각 속성의 차이

innerHTML

• HTML 구조 전체 반환
• 태그 포함됨
• 숨김 요소도 포함됨
• 주로 에디터나 마크업 수정 시 사용

// 결과:
안녕~ 
<span style='display:none'>innerText는 나를 볼 수 없어😏</span>

innerText

• 렌더링된 화면 기준 텍스트만 반환
• 스타일(display:none 등) 의 영향을 받음
• 사용자에게 보이는 것만 추출 함

// 결과:
안녕~

textContent

• 모든 텍스트 노드를 가져옴
• 숨김 여부 무관
• 태그 제외, 전체 텍스트 추출 에 유용

// 결과:
안녕~ 
innerText는 나를 볼 수 없어😏

언제 써야 할까?

목적	적절한 속성
HTML 구조를 수정하거나 저장할 때	innerHTML
사용자에게 보여지는 텍스트만 추출	innerText
숨김 요소 포함 전체 텍스트 추출	textContent

마무리

비슷해 보이지만 실제로는 쓰임새가 완전히 다른 세 속성. 기능을 정확히 알고 써야 버그 없는 코드를 짤 수 있다.
DOM을 다루는 웹 개발자라면 반드시 숙지해야 할 차이점이다.