innerHTML, innerText, textContent

innerHTML, innerText, textContent의 차이

• innerHTML : 요소 내의 HTML과 XML 모두를 의미
• innerText : 요소 내에서 사용자에게 보여지는 text를 의미
• textContent : 해당 노드가 가지고 있는 모든 text를 의미

<div id = "content">
  안녕하세요. 보이는 텍스트입니다.
  <span style = "display: none" >보이지 않는 텍스트입니다.</span>
</div>

const content = document.querySelector("#content");

console.log(content.innerHTML);
/* 
  안녕하세요. 
  보이는 텍스트입니다.
  <span style = \"display: none\" >보이지 않는 텍스트입니다</span>
*/

console.log(content.innerText);
/*
  안녕하세요. 보이는 텍스트입니다.
*/

console.log(content.textContent)
/*
  안녕하세요.
  보이는 텍스트입니다.
  보이지 않는 텍스트입니다.
*/

출처 : kim unknown.log