[JavaScript] innerHTML, innerText, textContent 차이점

innerHTML, innerText, textContent는 노드의 특정 값을 읽어오고 설정할 수 있다는 점에서 비슷합니다.

하지만 각자 차이점이 존재하므로 이 글을 통해 정리하고자 합니다.

 

---

예제

다음 예제를 실행하여 각각의 차이점을 알아보겠습니다.

<p id="test">
  <style>#test { color: red; }</style>
  안녕하세요. <br>테스트<br>입니다.
  <span style="display:none">숨겨진 글</span>
</p>

const test = document.getElementById("test");

console.log(test.innerHTML)
console.log(test.innerText)
console.log(test.textContent)

 

---

innerHTML

  <style>#test { color: red; }</style>
안녕하세요. <br>테스트<br>입니다.
  <span style="display:none">숨겨진 글</span>

innerHTML는 해당 노드 안에 있는 모든 HTML 마크업을 문자열로 반환하거나 직접 변경합니다.

innerHTML을 사용하면 HTML 마크업으로 간단하게 DOM 조작이 가능합니다.

 

하지만 XSS(Cross-site scripting)로부터 취약하다는 단점이 있습니다.

(DOMPurify 등의 HTML sanitization 라이브러리로 XSS를 예방할 수 있습니다.)

• XSS (Cross-site scripting) : 공격자가 사이트에 스크립트를 넣어서 공격하는 기법

 

innerHTML는 기존의 모든 자식 노드를 제거하고 HTML 마크업을 할당하는 방식을 가졌습니다.

이러한 방식은 성능에 좋지 않으며 요소가 삽입될 위치를 지정할 수 없는 단점도 있습니다.

 

 

🔎 insertAdjacentHTML

insertAdjacentHTML는 innerHTML의 문제점이 개선된 메서드입니다.

기존의 자식 노드를 제거하지 않으면서 원하는 위치에 새로운 요소를 삽일할 수 있습니다.

하지만 innerHTML과 마찬가지로 XSS 공격에 취약합니다.

 

insertAdjacentHTML

 

insertAdjacentHTML로 노드를 삽입할 수 있는 위치는 아래와 같습니다.

• beforebegin
• afterbegin
• beforeend
• afterend

 

---

innerText

안녕하세요.
테스트
입니다.

innerText는 해당 요소와 그 자손의 텍스트가 렌더링 된 결과를 나타낸다.

결과물을 보면 줄 바꿈이 반영되고 display: none으로 설정된 숨겨진 글이 보이지 않습니다.

이처럼 사용자에게 보여질 모습과 가장 근사한 결과를 나타냅니다.

 

---

textContent

  #test { color: red; }
안녕하세요. 테스트입니다.
  숨겨진 글

textContent는 노드와 그 자손의 텍스트 콘텐츠를 표시합니다.

 

---

🔎 textContent vs innerText

innerText는 사람이 볼 수 있는 요소만 반환하고 보이지 않는 요소는 반환하지 않습니다. 

TextContent는 <script>나 <style> 태그를 포함한 모든 내용을 반환합니다.

 

🔎 textContent vs innerHTML

innerHTML은 해당 노드 안의 모든 HTML 마크업을 반환합니다.

textContent는 HTML 마크업을 제외한 텍스트만 가져옵니다.

텍스트만 추출하는 경우 innerHTML을 사용하는 것보다 textContent를 사용하는 것이 성능이 좋습니다.