[JavaScript] innerHTML, innerText, textContent 차이 정리

이번 우테코 웹 기반 미션 로또를 진행하면서 HTML 내의 텍스트를 다루어야 하는 일이 있었습니다.

미션을 진행하면서 어떤 텍스트 요소를 사용하는 것이 좋은 코드일까 고민하면서 공부한 개념들을 살짝 정리해 보았습니다. 

 

---

 

웹 개발에서 JavaScript를 활용하여 HTML 요소의 텍스트를 다루는 것은 아주 흔한 일입니다.

이를 다루기 위해서는 innerHTML, innerText, textContent 등의 다양한 속성들을 사용하여 다룰 수 있고, 각각 다른 특성을 가지고 있어 이를 이해하고 사용해야 합니다.

 

 1. innerHTML 

innerHTML은 HTML 요소의 속성으로, 해당 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 새 내용으로 설정할 수 있는 기능을 제공합니다. 이를 통해 쉽게 내부 HTML 코드를 JavaScript에서 변경할 수 있습니다.

// HTML 코드와 함께 작성 가능
document.documentElement.innerHTML = "<p>innerHTML</p>";

// 스타일 적용 가능
document.documentElement.innerHTML = "<span style='color:blue'>innerHTML</span>";

// 빈 문자열을 넣으면 body의 전체 내용을 지울 수 있음
document.body.innerHTML = "";

 

 2. innerText 

 

innerText는 HTML 요소의 속성으로, 사용자에게 보여지는 텍스트 값을 가져오거나 설정할 수 있습니다. 하지만 HTML 태그를 사용할 수 없고, 태그를 문자열 그대로 적용합니다. 즉 HTML 마크업을 무시한다는 뜻입니다.

document.documentElement.innerText = "innerText";

// HTML 태그를 넣으면 태그도 텍스트 값으로 적용이됨
document.documentElement.innerText = "<p>innerText</p>";

 

 

비교를 통해 확인해보겠습니다.

const innerT = document.getElementById('innerT');
innerT.innerText = "<div style='color:red'>innerText</div>";
// 결과: innerText는 HTML 태그를 문자열 그대로 출력 (스타일 미적용)

const innerH = document.getElementById('innerH');
innerH.innerHTML = "<div style='color:red'>innerHTML</div>";
// 결과: innerHTML은 HTML 태그를 적용하여 스타일이 적용된 결과 출력

 

 

 

 3. textContent 

 

textContent는 Node의 속성으로, 사용자에게 보이는 텍스트뿐만 아니라 <script>나 <style> 태그에 상관없이 해당 노드가 가지고 있는 모든 텍스트 값을 가져옵니다.

 

const content = document.getElementById('content');

console.log(content.innerHTML);
// HTML 전체를 가져옴

console.log(content.innerText);
// 사용자에게 보여지는 텍스트만 가져옴

console.log(content.textContent);
// 모든 텍스트 값을 가져옴

 

 

따라서, innerHTML과 innerText와 textContent의 차이는 각각 HTML, 사용자에게 보이는 텍스트, 모든 텍스트를 다룬다는 점에서 나타납니다.

 

textContent는 Node의 속성으로, <script>나 <style> 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 읽어옵니다. 이러한 특성으로 인해 textContent는 다양한 상황에서 활용될 수 있습니다.

 

 

그럼 둘 중 무엇을 사용하는 것이 좋을까?

물론 내가 생각하는 것이 답이 아닐 수도 있지만,

나의 의견과 책과 코드 리뷰어분들의 의견을 총합하자면 innerText 보다는 textContent를 사용하는 것이 좋다는 것이 내 결론이다.

 

 

이유는?

1. innerText 같은 경우는 CSS 속성에 순종적이라, CSS에 의해 비표시 (visibility: hidden;)로 지정된 요소 노드의 텍스트를 반환하지 못합니다.
2. 이렇게 CSS 속성을 고려해야 하다 보니 속도가 느리다고 합니다.

*모던 자바스크립트 Deep Dive 참조

 

 

관련해서 스택오버플로우에서 나눈 이야기도 읽어보면 비슷한 이유를 말하는 거 같습니다. 

Difference between textContent vs innerText

 

 

작성한 내용은 제가 공부하면서 배운 것들을 정리한 개념으로 틀린 정보나 정확하지 않은 정보가 포함되어 있을 수 있습니다. 틀린 정보가 있다면 알려주시면 수정하도록 하겠습니다!