[JavaScript] innerHTML vs. innerText vs. textContent

innerHTML

innerHTML 속성은 요소(element) 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정한다.

innerText

innerText 속성은 요소(element)와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타낸다.

textContent

textContent 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현한다.

innerHTML과 textContent의 차이

• Element.innerHTML는 이름 그대로 HTML을 반환한다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋다.
• textContent는 XSS 공격 (en-US)의 위험이 없다.

innerText와 textContent의 차이

• textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져온다. 반면 innerText는 "사람이 읽을 수 있는" 요소만 처리한다.
• textContent는 노드의 모든 요소를 반환한다. 그에 비해 innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않는다.
• innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. (리플로우 계산은 비싸므로 가능하면 피해야 한다)

예시

<p id="myP">   This element has extra spacing     and contains <span>a span element</span>.</p>

let text = document.getElementById("myP").innerHTML;
// The innerHTML property returns:
//    This element has extra spacing    and contains <span>a span element</span>.

let text = document.getElementById("myP").innerText;
// The innerText property returns:
// This element has extra spacing and contains a span element.

let text = document.getElementById("myP").textContent;
// The textContent property returns:
//    This element has extra spacing    and contains a span element.

참고문헌

• MDN Element.innerHTML
• MDN HTMLElement.innerText
• MDN Node.textContent
• W3Schools HTML DOM Element innerText