[JavaScript] innerHTML, innerText, textContent 비교

innerHTML, innerText, textContent 모두 태그 내의 값을 가지고 온다.

<!-- 테스트 코드 -->
<div id="text">
    테스트 글
    <span style="display:none">숨겨진 글</span>
    <style> #text {color: red;}</style>
</div>

// console 창 출력
let text = document.querySelector('#text')

console.log("innerHTML: " + text.innerHTML)
console.log("innterText: " + text.innerText)
console.log("textContent: " + text.textContent)

 

1. Element.innerHTML

innerHTML은 요소에 포함된 HTML, XML의 전체 내용을 불러온다. (HTML 태그, 공백 등)

innerHTML: 
            테스트 글
            <span style="display:none">숨겨진 글</span>
            <style> #text {color: red;}</style>

 

2. Node.innerText

innerText는 해당 요소와 그 자손의 텍스트만 불러온다.
display:none으로 설정된 텍스트는 보이지 않는다.

innterText: 테스트 글

 

3. Node.textContent

textContent는 노드와 그 자손의 컨텐츠를 불러온다.
숨겨진 글, <style> 태그 안의 내용도 표시된다.

textContent: 
            테스트 글
            숨겨진 글
             #text {color: red;}

 

[참고] <input> 태그의 value 속성

<input> 태그의 value 속성은, <input> 태그 내에 입력된 값을 불러온다.