innerHTML, innerText, textContent

DOM API에는 많은 웹 개발자들을 헷갈리게 하는 3가지 속성이 있습니다. 바로 느낌이 비슷한 innerHTML, innerText, textContent인데요. 모두 HTML 요소의 내용을 접근할 때 사용하는 속성이지만 알고 보면 중요한 차이점이 있죠.

이번 포스팅에서는 이 알쏭달쏭한 HTML 요소의 3가지 속성에 대해서 알아보겠습니다.

innerHTML 속성

innerHTML 속성은 HTML 요소 내부에 있는 HTML 코드를 있는 그대로 문자열 형태로 접근할 수 있도록 해줍니다.

예를 들어, 다음과 같이 3개의 <li> 요소로 이루어진 <ul> 요소가 있다고 가정해봅시다.

<ul>
  <li>수박</li>
  <li>딸기</li>
  <li>망고</li>
</ul>

<ul> 요소를 선택한 후 innerHTML 속성에 접근하면, <li> 요소들이 들어있는 문자열이 얻어집니다.

const ul = document.querySelector("ul");
console.log(ul.innerHTML);

"
  <li>수박</li>
  <li>딸기</li>
  <li>망고</li>
"

innerHTML 속성에 HTML이 담긴 문자열을 넘기면 해당 HTML 요소의 내용이 변경이 되는데요. 이 때 문자열이 HTML 코드로 해석되어 요소 내부에 들어갑니다.

const ul = document.querySelector("ul");
ul.innerHTML = `
  <li>오렌지</li>
  <li>파인애플</li>
  <li>바나나</li>
`;

하지만 innerHTML 속성을 통해서 HTML 요소의 내용을 설정하는 것은 보안 측면에서 매우 위험합니다. 브라우저는 innerHTML 속성의 값을 문자열이 아닌 HTML 코드로 해석을 하기 때문에 XSS(Cross-site scripting) 공격에 노출될 수 있기 때문인데요. 따라서 innerHTML 속성에 <script> 요소가 포함된 HTML 문자열을 설정해줄 경우, 브라우저는 해당 스크립트를 그대로 실행하게 됩니다. 그래서 악성 코드가 담긴 스크립트도 실행시킬 수 있죠.

DOM에 새로운 요소를 추가할 때는 innerHTML 속성 대신에 createElement()나 appendChild()와 같은 함수를 사용하는 것이 바람직합니다.

innerText 속성

innerText 속성은 통해서는 HTML 코드는 무시하고 화면에 보이는 텍스트를 있는 그대로 접근할 수 있도록 해줍니다.

예를 들어, 다음과 같이 3개의 <li> 요소로 이루어진 <ul> 요소가 있다고 가정해봅시다. 마지막 <li> 요소에는 보이지 않은 텍스트를 끝에 추가하였습니다.

<ul>
  <li>수박</li>
  <li>딸기</li>
  <li>망고<span style="display: none;">(New)</span></li>
</ul>

<ul> 요소를 선택한 후 innerText 속성에 접근하면, 내부에 있는 보이는 대로 텍스트가 얻어집니다. 하지만 세 번째 <li> 요소 안에 들어 있던 (New) 텍스트는 보이지 않기 때문에 결과에 포함되지 않습니다.

const ul = document.querySelector("ul");
console.log(ul.innerText);

"수박
딸기
망고"

innerText 속성은 주로 HTML 요소의 숨겨진 텍스트까지 포함한 모든 텍스트를 읽으려고 할 때 사용됩니다. HTML 요소의 텍스트를 설정할 때는 다음에 소개해드릴 textContent 속성을 쓰는 경우가 많습니다.

textContent 속성

textContent 속성은 innerText 속성처럼 HTML 코드를 무시하고 텍스트만 접근할 수 있도록 해줍니다. 하지만 속성 값에 숨겨진 요소의 텍스트까지 포함된다는 차이점이 있습니다.

const ul = document.querySelector("ul");
console.log(ul.textContent);

"
  수박
  딸기
  망고(New)
"

textContent 속성은 <button>이나 <span>와 같이 내부에 HTML 코드가 아닌 텍스트만 있는 경우가 많은 HTML 요소의 내용을 설정해줄 때 많이 사용됩니다. innerText 속성을 사용할 수도 있지만 textContent 속성을 사용하는 편이 더 효율적인 것으로 알려져 있습니다.

const button = document.querySelector("button");
button.textContent = "신규 텍스트";

마치며

지금까지 innerHTML, innerText, textContent의 미묘한 차이점과 언제 어떤 속성을 사용해야 하는지에 알아보았습니다. 상황에 맞게 적절한 속성을 선택하셔서 사용하시기 바랍니다.