[JavaScript] innerHTML vs innerText vs textcontent

innerHTML vs innerText vs textcontent 차이점을 알아보자.

✨ innerHTML

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

• 사용

  const content = element.innerHTML;
  
   element.innerHTML = htmlString;

• 출력결과

  <div class="button__wrapper">
      <button type="button" class="employee-add__button">직원 등록</button>
      <button type="button" class="employee-delete__button">직원 삭제</button>
  </div>

  

---

✨ innerText

• 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타낸다.

• 사용

  const renderedText = htmlElement.innerText;
  
   htmlElement.innerText = string;

• 출력 결과

  <div class="button__wrapper">
      <button type="button" class="employee-add__button">직원 등록</button>
      <button type="button" class="employee-delete__button">직원 삭제</button>
  </div>

  

• 사용자에게 보여지는 텍스트 값을 읽어오며 여러 공백은 무시하고 하나의 공백만 처리한다.

---

✨ textContent

• 노드와 그 자손의 텍스트 콘텐츠를 표현한다.

• 노드가 document 또는 Doctype 이면 null을 반환한다.

• 사용

  let text = someNode.textContent;
  
   someOtherNode.textContent = string;

• 출력 결과

  <div class="button__wrapper">
      <button type="button" class="employee-add__button">직원 등록</button>
      <button type="button" class="employee-delete__button">직원 삭제</button>
  </div>

  

• display:none 스타일이 적용된 숨겨진 텍스트도 노드가 가지고 있는 텍스트 값 그대로 보여준다.

📌 innerHTML vs textContent

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

📌 innerText vs textContent

• 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않다.
• textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져온다.
  반면 innerText는 "사람이 읽을 수 있는" 요소만 처리한다.
• textContent는 노드의 모든 요소를 반환한다.
  innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않는다.
• innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다.
• Internet Explorer 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴한다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능하다.

---

✔ 결론

• 요소의 텍스트를 가져오거나 쓰는 경우가 많아서 어떤 속성을 써야할지 궁금했는데 성능의 차이로 textContent 사용을 권장한다.
• innerHTML 은 XSS 공격의 위험으로 보안상으로도 문제가 되고 파싱 작업으로 인해 성능면에서도 떨어진다.
• HTML을 document에 삽입하려면 innerHTML 대신 insertAdjacentHTML() 메서드를 사용하자.
  + insertAdjacentHTML(position, text) 는 지정된 텍스트를 HTML 혹은 XML로 파싱하고 결과 노드들을 지정된 위치의 DOM 트리에 삽입한다.

innerHTML 공식문서
innerText 공식문서
textContent 공식문서