`innerText`와 `innerHTML`의 차이점을 알아보자!

프로젝트에 innerText를 처음 써보았는데 자동완성으로 innerHTML이 먼저 뜨기도 했고, 둘의 차이점이 무엇인지 알고 싶어서 공부해봐야겠다고 느꼈다.

HTMLElement.innerText

HTMLElement 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링된 텍스트 콘텐츠를 나타낸다.

innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공한다.

✔️ 참고: innerText는 Node.textContent와 혼동하기 쉬우나 중요한 차이점을 갖고 있다. 기본적으로 innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않다.

 

CSS로 display:none의 속성이 적용된 요소의 텍스트는 가져올 수 없다.

텍스트를 표시하는 태그 요소 안의 텍스트 데이터는 DOM 안에서 하나의 노드로 저장된다. 즉, 노드로 저장되지 않는 텍스트 데이터는 제외된다. 대표적인 게 폼 요소(input, textarea) 안에 작성한 텍스트이다.

 

const renderedText = htmlElement.innerText;
htmlElement.innerText = string;

Element.innerHTML

Element 속성 innerHTML은 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정한다.

✔️ 참고: <div>, <span> 노드가 (&), (<), (>) 문자를 포함하는 텍스트 노드를 자식으로 갖고 있다면, innerHTML은 이러한 문자들을 각각 &, < ,>로 반환한다. Node.textContent를 사용하여 이러한 텍스트 노드 내용의 원본을 복사할 수 있다.

const content = element.innerHTML;

element.innerHTML = htmlString;

innerText와 innerHTML의 차이

조회하는 노드 설정에 따라 두 값이 같아질 수도 있고 달라질 수도 있다. textContent도 비슷한 것 같아 같이 알아볼 수 있어 좋았다! 🧐 그리고 개인적인 생각이지만 innerHTML을 통해서 html 내부를 조작하는 것보다 innerText로 엘리먼트를 최대한 안건들일 수 있는 방향이 좋은 것 같다.

 

 

---

 

[HTMLElement.innerText]

[Element.innerHTML]

[[Javascript] innerHTML, innerText, textContent 의 차이]