innerHTML, innerText, textContent의 차이

innerHTML, innerText, textContent의 공통점

: node나 element의 텍스트를 읽어오고 설정할 수 있다.

---

innerHTML

Element.innerHTML : 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 직접 설정할 수 있다.

• HTML 코드와 함께 작성 가능하다.

document.body.innerHTML = "<p><strong>HTML 코드</strong>와 함께 작성 가능하다.</p>"

• 스타일을 적용할 수 있다.

document.body.innerHTML = "<p style = 'color: red'>스타일을 적용할 수 있다.</p>"

• 이런 식으로 빈 문자열을 넣으면 요소의 전체 자식 요소를 삭제할 수 있다.

document.body.innerHTML = ""; // body의 모든 자식 요소 삭제

---

innerText

HTMLElement.innerText : 요소의 렌더링 된 텍스트 콘텐츠를 나타낸다.
요소 내에서 사용자에게 보여지는 텍스트값을 가져오거나 설정할 수 있다.

• innerHTML과 달리 텍스트값만 다루기 때문에 HTML 코드는 작성할 수 없다.

document.body.innerText = "텍스트값만 다룬다."

• 만약 HTML 코드를 넣으면 텍스트로 인식하고 문자열에 그대로 적용한다.

document.body.innerText = "<p>innerText</p>" 
// 문자열 "<p>innerText</p>"을 화면에 그대로 출력한다.

---

textContent

Node.textContent : <script>나 <style> 태그와 상관없이, 해당 노드가 가지고 있는 텍스트값를 그대로 읽어 온다.

• display: none 속성을 이용해 사용자에게 보이지 않는 텍스트까지 불러온다.

정리

속성	의미하는 텍스트
innerHTML	요소 내에 있는 HTML과 XML 모두를 의미
innerText	요소 내에서 사용자에게 보여지는 text를 의미
textContent	script나 style 태그와 상관없이 해당 노드가 가지고 있는 text를 의미

이 글은 아래 링크를 참고하여 작성한 글입니다.
https://velog.io/@kim_unknown_/JavaScript-Difftext