[JavaScript] innerHTML, innerText, textContent 차이점

innerHTML

innerHTML은 'Element'의 속성으로 HTML, XML을 읽어오거나 설정할 수 있다.
div안에 있는 HTML 전체 내용을 가져오는 것을 확인할 수 있다.

즉, HTML 전체 내용을 가져온다.

<li>안녕하세요? 저는 뉴진스를 좋아합니다.</li>

const element = document.getElementById('li');
element.innerHTML
[결과]
<li>안녕하세요? 저는 뉴진스를 좋아합니다.</li>

innerText

innerText는 'Element'의 속성으로, 해당 Element 내에서 사용자에게 보여지는 텍스트 값만 가져온다.

즉, text값만 가져온다.

<li>안녕하세요? 저는 뉴진스를 좋아합니다.</li>

const element = document.getElementById('li');
element.innerText
[결과]
안녕하세요? 저는 뉴진스를 좋아합니다.

textContent

textContent는 'Node'의 속성으로, innerText와는 달리 script 나 style 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 읽는다.
그래서 숨겨진 문자열들도 그대로 출력되는 것을 알 수 있다.

<li>안녕하세요? 저는 뉴진스를 좋아합니다.<span style="color:blue">hidden Text</span></li>

const element = document.getElementById('li');
element.innerText
[결과]
안녕하세요? 저는 뉴진스를 좋아합니다.
hidden Text

3가지 차이의 느낀점

3가지가 기능적인 부분으로 봤을 때는 같은 역할을 하지만
element가 갖고 있는 컨텐츠 내용의 따라서 차이가 나는 것을 확인할 수 있었다.

innerHTML, innerText, textContent 끝