[Javascript] innerHTML, innerText, textContent 차이점 예제 포함

innerHTML vs innerText vs textContent

Javascript에서 Node 또는 Element의 텍스트값을 읽어오거나 설정할 때 innerHTML, innerText, textContent 속성을 사용하게 됩니다. 그런데 여기서 문제는, 어떤 상황에서 어떤 것을 사용하느냐입니다. 왜냐하면 각각이 가져오거나 수정하는 내용에는 차이가 있기 때문입니다. 헷갈리지만 가장 기본적인 내용 중 하나이니 예제로 알아보겠습니다!

 

html body 부분이 아래와 같이 적혀 있다고 했을 때 세 가지를 통해 각각 어떤 값이 가져와지는지 보겠습니다.

<div id="testElem">
  <p>Hello <strong>World</strong></p>
</div>

---

innerHTML

innerHTML 속성은 'Element'의 속성으로, Element 내부에 있는 HTML 또는 XML 마크업 내용을 모두 가져오거나 설정합니다.
이 속성을 통해 HTML 태그를 추가하거나 제거하고, 요소 내용을 변경할 수 있습니다. 주의할 점은 innerHTML을 사용할 때, 내용에 포함된 스크립트 태그나 이벤트 핸들러 등이 실행될 수 있다는 점입니다.

 

예를 들어 script 내용을 아래로 설정하게 될 경우 출력값은 < p > 태그와 같은 스크립트 태그까지 모두 포함하게 됩니다.

var element = document.getElementById("testElem");

// HTML 내용 가져오기
var htmlContent = element.innerHTML;
console.log(htmlContent); // 출력: <p>Hello <strong>World</strong></p>

// HTML 내용 설정하고 싶다면: 
element.innerHTML = "<p>Happy <em>Cat</em></p>";

innerHTML 실행 결과

---

innerText

innerText 또한 'Element'의 속성이지만, 사용자에게 '보여지는' 텍스트 값만을 가져오거나 설정합니다.
HTML 태그는 무시되고, 순수한 텍스트만을 반환합니다.
또한, display:none 으로 숨겨진 요소의 텍스트나 사용자에게 보이지 않는 텍스트는 반환되지 않습니다.
'        '와 같은 연속된 공백은 무시하고 ' ' 하나의 공백만을 처리합니다.

innerText는 사용자가 브라우저에 보이는 텍스트를 '복사하기'해서 클립보드에 복사한 내용을 가져오는 개념과 같습니다!

var element = document.getElementById("testElem");

// 텍스트 내용 가져오기
var textContent = element.innerText;
console.log(textContent); // 출력: Hello World

// 텍스트 내용 설정하고 싶다면 
element.innerText = "Happy       Cat";
// element.innerText = "Happy        Cat"; 해도 똑같은 결과!

innerText 실행 결과

---

innerText vs innerHTML 예시 

innerText, innerHTML 차이점이 아직 알쏭달쏭 하시다면, 아래 코드를 생각해 보세요:

// '<div style='background-color:yellow'> </div>' 을 넣을 때의 차이는 무엇일까?

const intext = document.getElementById('intext');
intext.innerText = "<div style='background-color:yellow'>innerText</div>";
console.log(intext) // 결과 : <div style='background-color:yellow'>innerText</div>

const inhtml = document.getElementById('inhtml');
inhtml.innerHTML = "<div style='background-color:yellow'>innerHTML</div>";
console.log(inhtml) // 결과 : innerHTML

여기서 innerText는 스타일이 적용되지 않은 기본 폰트로 <div style='background-color:yellow'>innerText</div>를 출력할 것이고,

innerHTML은 스타일이 적용된 노란 하이라이트로 innerHTML이라는 텍스트를 출력할 것입니다.

---

textContent

textContent 속성은 'Node'의 속성으로, < script > < style > 등의 태그와 상관없이 해당 노드의 텍스트 값을 그대로 읽습니다.
이 속성은 innerText와 달리 CSS 스타일을 무시하고, 모든 텍스트를 가져오기 때문에 숨겨진 요소나 사용자에게 보이지 않는 텍스트도 반환됩니다.
'        ' 와 같은 연속된 공백 또한 '        '으로 그대로 표현됩니다.

var element = document.getElementById("testElem");

// 텍스트 내용 가져오기
var textContent = element.textContent;
console.log(textContent); // 출력: Hello World

// 텍스트 내용 설정하고 싶다면 공백 주의!
element.textContent = "Happy Cat";

textContent 실행결과

---

결론적으로 세 가지 속성은 텍스트 콘텐츠의 내용에 따라서 차이가 나는 것을 기억해야겠습니다.