innterHTML, innerText, textContent의 차이

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

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

innerHTML

이 속성은 요소의 HTML 내용을 그대로 다룬다.
HTML 태그를 포함한 모든 내용을 문자열로 반환하고, 새로운 HTML을 설정할 수 있다.

다음 코드는 요소 내부의 HTML 태그를 포함한 모든 내용을 출력한다.

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

그리고 이렇게 새로운 HTML을 설정하면 <i>태그가 실제로 적용되어 이탤릭체로 표시된다.

const element = document.getElementById('example');

element.innerHTML = '안녕하세요 <i>woodstock</i>입니다.';
console.log(element.innerHTML);

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

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

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

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

const element = document.getElementById("example");
console.log(element.innerText);

display:none으로 숨겨진 "저는"은 출력되지 않고, 실제로 보이는 텍스트만 출력된다.

코드를 다음과 같이 작성하면, HTML 태그가 일반 텍스트로 처리되어 <i> 태그가 그대로 문자열로 표시된다.

const element = document.getElementById("example");

element.innerText = "안녕하세요 <i>woodstock</i>입니다.";
console.log(element.innerText);

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

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

const element = document.getElementById("example");
console.log(element.textContent);

display:none으로 숨겨진 "저는"을 포함한 모든 텍스트가 출력된다.

그리고 innerText와 마찬가지로 HTML 태그가 그대로 텍스트로 표시된다.

const element = document.getElementById("example");

element.textContent = "안녕하세요 <i>woodstock</i>입니다.";
console.log(element.textContent);