innerHTML, innerText, textContent

geun·2024년 1월 9일

JavaScript

목록 보기

6/12

innerHTML, innerText, textContent 속성은 element의 텍스트값을 읽어오고 설정할 수 있다는 점에서 비슷하다. 각각의 특징과 차이에 대해 알아보자.

innerHTML은 해당 Element의 HTML을 읽어오거나, 설정할 수 있다. 즉, 안으l Text뿐만 아니라, 태그 등의 내용 전체를 가져온다.

innerText는 innerHTML과는 다르게 해당 Element내의 Text만을 읽어온다.

textContent는, Node의 속성으로 innerText와는 달리, script, style 태그와 상관없이 해당 노드가 가지고있는 텍스트 값을 그대로 읽는다. 공백이나 style값의 display로 none 되어있는것도 상관없이 그대로 가져와서 읽는다.

세가지는 각각은 크게 차이 없어보이지만, element의 컨텐츠 내용에 따라 차이가 나는것을 알 수 있다.