[JS 이론] innerHTML, innerText, textContent의 차이점

innerHTML, innerText, textContent의 차이점을 알아보자.

innerHTML, innerText, textContent 속성은 node나 element의 텍스트값을 변경하거나 지정할 수 있다는 점에서 비슷하다.

예시

// html
<div id='my_div'>
  안녕하세요?     만나서 반가워요.
  <span style='display:none'>숨겨진 텍스트</span>
</div>
<input type='button'
       value='innerHTML'
       onclick='getInnerHTML()'/>
<input type='button'
       value='innerText'
       onclick='getInnerText()'/>
<input type='button'
       value='textContent'
       onclick='getTextContent()'/>

// 자바스크립트
function getInnerHTML() {
  const element = document.getElementById('my_div');
  alert(element.innerHTML);
} 

function getInnerText() {
  const element = document.getElementById('my_div');
  alert(element.innerText);
} 

function getTextContent() {
  const element = document.getElementById('my_div');
  alert(element.textContent);
} 

innerHTML

element 속성으로, 해당 element에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정할 수 있다.

즉, innerHTML을 사용하면 내부 HTML 코드를 자바스크립트에서 쉽게 변경 할 수 있다.

문법
const content = element.innerHTML; 또는
element.innerHTML = htmlString;

// html 코드와 함께 작성 가능
document.documentElement.innerHTML = "<p>innerHTML</p>"
// 스타일 적용
document.documentElement.innerHTML = 
  "<span style='color:blue'>innerHTML</span>"

// 이런 식으로 빈 문자열을 넣으면 body의 전체 내용을 지울 수 있다.
document.body.innerHTML = "";

innerText

innertext 역시 element 속성으로, element 내에서 사용자에게 보여지는 텍스트 값을 가져오거나 설정할 수 있다.

그렇기 때문에 원래 div 의 텍스트에는 많은 공백이 있었지만, 연속되는 공백은 무시하고 하나의 공백으로만 처리하여 '안녕하세요? 만나서 반가워요.' 라고 보여진다.

또한,display:none 으로 정의된 텍스트는 '숨겨진 텍스트' 로서 사용자에게 보여지지 않는다.

div 의 내용을 복사 붙여넣기 한다고 생각하면 이해하기 쉽다.

textContent

node 속성으로, 사용자에게 보여지는 텍스트 값 뿐만 아니라 <script> 와 <style> 태그 등 해당 노드가 가지고 있는 모든 정보를 읽어온다.

'안녕하세요? 만나서 반가워요.' 의 연속된 공백도 그대로 표현된다.

또한, 'display:none' 스타일이 적용된 '숨겨진 텍스트' 문자열도 그대로 출력되는 것을 확인 할 수 있습니다.

References

https://hianna.tistory.com/483
https://velog.io/@kim_unknown_/JavaScript-Difftext