공부노트/JavaScript

[JavaScript] innerHTML vs innerText vs textContent

Reload0213 2021. 10. 10. 22:22

 

 

비슷비슷하지만 서로 다른 세 가지 속성 innerHTML, innerText, textContent 세가지의 차이점을 정리해보겠습니다.

 

 

innerHTML vs innerText vs textContent

 

눈으로 쉽게 확인 할 수 있도록 예시로 만들어 보았습니다.

 

 

 

 

 

 

 1.  innerHTML 

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

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

div안에 있는 HTML 전체 내용을 가져오는 것을 확인 할 수 있습니다.

 

사용자가 브라우저에서 div의 내용을 Ctrl+C하여 클립보드에 복사한 내용을 가져온다고 생각하면 이해하기 쉽습니다.

 

 

 

 

 2. innerText 

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

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

아래와 같은 텍스트를 가져옵니다.

원래 div안에는 

'안녕하세요?    만나서 반가워요'가 입력되어 있지만,

브라우저가 사용자에게 이 내용을 보여줄 때는, 연속되는 공백은 무시하고 하나의 공백만 처리하여

'안녕하세요? 만나서 반가워요.'라고 보여집니다.

 

또한, 위 예제의 div는 'display:none' 으로 정의된 텍스트를 포함하고 있습니다.

'display:none'으로 정의된 '숨겨진 텍스트'는 브라우저에서 사용자에게 보여지지 않습니다.

 

innerText는 이처럼 스타일을 통해 숨긴 값은 읽어오지 않고 사용자에게 보여지는 텍스트를 가져옵니다.

 

 

 3. textContent 

textContent는 'Node'의 속성으로,

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

 

위 예제에서 textContent 버튼을 클릭하면, 위와 같은 결과가 나오는데,

'안녕하세요?    만나서 반가워요.'의 연속된 공백이 그대로 표현된 것을 확인 할 수 있습니다.

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

 

 

 

innerHTML, innerText, textContent 의 차이점을 알아보았습니다.

일반 Text값을 가지고 올때는 세 가지 속성에 별 차이가 없지만,

element가 가지고 있는 컨텐츠의 내용에 따라서 차이가 나는 것을 확인하였습니다.