[JavaScript] innerHTML, innerText, textContent 차이점

See the Pen Untitled by Sehui Jeong (@SayisMe) on CodePen.

 

innerHTML

innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나 설정한다.

위 예제에서 innerHTML 버튼을 클릭하면

div 안에 있는 HTML 의 전체 내용을 가져오게 된다.

보이는 텍스트
<span style='display:none'>숨겨진 텍스트</span>

 

 

innerText

innerText는 'Element'의 속성으로, 해당 Element의 사용자에게 '보여지는' 텍스트 값을 읽어온다.

위 예제에서 innerText 버튼을 클릭하면

보여지는 텍스트를 가져온다.

보이는 텍스트

 

 

 

textContent

textContent는 'Node'의 속성으로, <script> 나 <style> 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 읽는다.

위 예제에서 textContent 버튼을 클릭하면

보여지는 텍스트와 함께 숨겨진 텍스트 문자열도 그대로 출력되는 것을 확인할 수 있다.

보이는 텍스트
숨겨진 텍스트