[JS] innerHTML 과 innerText, textContent의 차이 알아보기

innerHTML, innerText, textContent

1. innerHTML

element 속성으로, 지정한 element에 포함된 html 또는 xml 마크업을 가져온다.
예를 들어, <span> 이나 <div> 태그 안에 작성된 내용을 querySelector 로 불러와서 수정할 수 있다.
하지만 innerHTML은, 해당 element의 html 전체를 불러오기 때문에 단순 문자열로 변경할 때에는 textContent를 사용하는게 좋다.

<span id="content"> content </span>

document.querySelector('#content').innerHTML = "<div>hello world</div>"
// 아래 코드처럼, body 전체를 지우는 것도 가능하다.
document.body.innerHTML = "";

반환 된 HTML, XML 파편은 요소의 현재 내용을 기반으로 생성됩니다. 따라서 반환 된 마크업과 양식이 본래의 페이지 마크업과 일치하지 않을 수 있습니다.
출처 : https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML

2. innerText

innerText도 마찬가지로 element 속성이지만, html의 태그들이 아닌 해당 element의 text를 불러와서 변경할 수 있다.
innerHTML 과는 다르게, 태그를 불러오거나 변경할 수 없고 Text를 가져온다.

const text = document.getElementById('text');
text.innerText = "innerText";
console.log(innerT)
// <div id="text">innerText</div>

3. textContent

위에 작성한 innerHTML , innerText와는 다르게 textContent는 Node 속성이다.
innerText는 보여지는, 즉 사람이 읽을 수 있는 요소만 가져오지만
textContent는 display : none 등으로 숨겨진 요소도 불러온다.

document.getElementById('div1').textContent = 'hello, textContent!';

innerText 와 textContent의 차이점

MDN에 좋은 설명이 나와있어서 가져왔다!

• textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다. 반면 innerText는 "사람이 읽을 수 있는" 요소만 처리합니다.
• textContent는 노드의 모든 요소를 반환합니다. 그에 비해 innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않습니다.
• 또한, innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다)
• Internet Explorer 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴합니다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능합니다.

결론은, 텍스트 변경을 위한 용도라면 innerHTML보다 textContent을 사용하는것이 좋다!