JavaScript에서 DOM 요소의 텍스트 내용을 다루는 세 가지 주요 속성 innerHTML, innerText, textContent의 차이점을 알아보자.

<div id="example">
  안녕하세요 <span style="display:none;">저는</span>
  <b>woodstock</b>입니다.
</div>

1. innerHTML

이 속성은 요소의 HTML 내용을 그대로 다룬다.

HTML 태그를 포함한 모든 내용을 문자열로 반환하고, 새로운 HTML을 설정할 수 있다.

const element = document.getElementById('example');
console.log(element.innerHTML);

const element = document.getElementById('example');
console.log(element.innerHTML); // 요소의 모든 내용이 출력됨

element.innerHTML = '안녕하세요 <i>woodstock</i>입니다.'; // woodstock이 이탤릭체로 표시됨

innerHTML은 HTML 구조를 동적으로 변경할 때 유용하지만, XSS 공격에 취약할 수 있으므로 사용자 입력을 직접 삽입할 때는 주의가 필요하다.

XSS 공격이란?

사용자 브라우저에 전달되는 데이터에 악성 스크립트를 포함시킨 뒤, 사용자 브라우저에 실행되면서 해킹하는 공격이다.

2. innerText

이 속성은 사용자에게 실제로 보이는 텍스트만을 다룬다.

CSS에 의해 숨겨진 요소의 텍스트는 무시하며, HTML 태그를 일반 텍스트로 처리한다.

const element = document.getElementById("example");
console.log(element.innerText); // 숨겨지지 않은 텍스트만 출력됨

element.innerText = "안녕하세요 <i>woodstock</i>입니다.";
console.log(element.innerText); // 태그가 그대로 텍스트로 표시됨

3. textContent

이 속성은 요소 내의 모든 텍스트 콘텐츠를 다룬다.

const element = document.getElementById("example");
console.log(element.textContent); // 숨겨진 '저는'을 포함한 텍스트가 출력됨

element.textContent = "안녕하세요 <i>woodstock</i>입니다.";
console.log(element.textContent); // 태그가 그대로 텍스트로 표시됨

숨겨진 요소의 텍스트도 포함하며, HTML 태그나 스크립트도 모두 평문 텍스트로 처리한다.