innerHTML VS innerText VS textContent 차이점

innerHTML

- Element의 속성

- 해당 Element의 HTML, XML을 읽어거나 설정 가능

 

innerText

- Element의 속성

- 해당 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어온다.

- display: none 으로 정의된 숨겨진 텍스트는 사용자에게 보여지지 않는다.

 

textContent

- Node의 속성

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

- 문자열과 공백이 그대로 표현된다.

 

모두 자바스크립트에서 DOM을 탐색하고 조작할 때 사용하는 메서드로서

텍스트값을 읽어오고 설정할 수 있다는 비슷한 점이 있습니다. 하지만

element가 가지고 있는 컨텐츠의 내용에 따라 차이가 있기에 알아두어야 한다.