[JavaScript] innerHTML, innerText, textContent 차이점

innerHTML

요소의 내부 HTML을 포함한 모든 내용을 설정하거나 가져올 수 있다.

즉 HTML태그를 포함한 텍스트를 설정하거나 가져올 수 있다.

자바스크립트로 HTML 페이지를 동적으로 생성할 때 간편하게 내용을 추가할 수 있기 때문에 많이 사용하는 속성이다.

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

 

innerText

요소의 렌더링된 텍스트를 설정하거나 가져온다.

즉 CSS 스타일이 적용된 상태의 텍스트를 다룬다.

 

비교 예시

See the Pen Untitled by qeqqer (@qeqqer) on CodePen.

 

textContent

요소의 텍스트 내용을 설정하거나 가져올 때 HTML 태그를 해석하지 않는다. 따라서 텍스트 내용만 다룬다.

HTML 태그가 필요하지 않고( <script>나 <style> )텍스트만 다루어야 하는 경우에 유용하다.

 

요약

innerHTML은 HTML코드도 적용되는 텍스트

innerText는 element속성으로, html태그도 문자열 그대로 적용

textContent는 태그 상관없이 해당 노드가 가지고있는 text 의미