[🍦] text 삼형제 비교 - textContent / innerText / innerHTML

[ textContent / innerText / innerHTML ]

 

셋은 모두 타겟 요소의 컨텐츠를 가져오거나 설정하는 역할이다.

 

속성 비교

• textContent: 단순히 텍스트만 필요하거나, 숨겨진 텍스트까지 포함해야 하는 경우
• innerText: 사용자에게 보이는 텍스트만 필요할 때
• innerHTML: 요소 내부에 HTML 태그와 콘텐츠를 동적으로 추가하거나 수정할 때

속성	HTML 태그 포함 여부	숨겨진 텍스트 포함 여부	주 용도
textContent	X	O	태그를 제거한 순수 텍스트 가져오기
innerText	X	X	화면에 보이는 텍스트 가져오기
innerHTML	O	O	HTML 태그와 함께 가져오거나 수정하기

 

 

비교 예시

See the Pen Untitled by 채채 (@tknbwzhf-the-looper) on CodePen.

 

 

 

textContent

 

textContent는 'Node'의 속성으로,

<script>나 <style> 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 읽는다.

위 예제의 버튼 클릭 시 나오는 창.

'안녕하세요?     만나서 반가워요.'의 공백이 그대로 표현되어 있다.

또한, 'display:none' 스타일이 적용된 '숨겨진 텍스트' 문자열도 그대로 출력되는 것을 확인할 수 있다.

 

 

innerText

 

innerText는 'Element'의 속성으로,

해당 Element 내에서 사용자에게 '보여지는' 텍스트를 읽는다.

브라우저가 사용자에게 보여줄 때는 연속되는 공백은 무시하고 하나의 공백만 처리하기 때문에 위의 창처럼 나온다.

또한 'display:none'으로 정의된 내용도 보여지지 않는다.

 

 

innerHTML

 

innerHTML은 'Element'의 속성으로,

해당 Element의 HTML, XML을 읽어오거나 설정할 수 있다.

<div> 안에 있는 HTML 전체 내용을 가져온다.

---

참고: https://hianna.tistory.com/483