[JavaScript] innerHTML / innerText / textContent 의 차이점

막상 사용해보면 비슷한데,

조금씩 용도가 다른 innerHTML / innerText / textContent 의 차이점입니다.

 

 

---

- Setting -

// HTML
  <div id="textbox">
    헬로    월드
    <span style='color: red'>헬로   자바스크립트</span>
    <span style='display: none'>숨겨놓은 글</span>
  </div>


// JavaScript
  let $textbox = document.getElementById('textbox');

 

 

---

innerHTML

console.log($textbox.innerHTML);

  해당 요소의 HTML값을 그대로 가져옵니다.

 

 

출력 결과

"
  헬로    월드
  <span style='color: red'>헬로   자바스크립트</span>
  <span style='display: none'>숨겨놓은 글</span>
"

※ console.log나 alert 등으로 출력을 할경우 내부 태그도 함께 보이지만, 당연하게도 document.write로 출력할 경우엔 태그 속성이 적용된 [헬로 월드 헬로 자바스크립트]로 출력됩니다.

 

 

---

innerText

console.log($textbox.innerText);

  해당 요소를 통하여 사용자에게 보여지는 값을 출력합니다.

  연속된 공백은 자동으로 하나의 공백만 남기게 되며, 보이지 않는 요소(display: none)는 표시하지 않습니다.

 

 

출력 결과

"헬로 월드 헬로 자바스크립트"

 

 

---

textContent

console.log($textbox.textContent);

  마크업 태그를 제외한 문자열을 출력합니다.

  공백 또한 그대로 표시되며, 보여지지 않은 텍스트 또한 출력할 수 있습니다.

  

 

출력 결과

"
  헬로    월드
  헬로   자바스크립트
  숨겨놓은 글
"