innerHTML, innerText, textContent 비교

<div id="title">
	Hello!!
    <div style="display:none">HTML!!</div>
</div>

 

위의 코드와 같이 html이 구성되져 있고 document.getElementById("title") 로 접근을해서 innerHTML, innerText, textContent의 값을 가져온다고 가정을 하면 아래와 같은 결과가 나온다.

 

innerHTML : 영어 문자 그대로 내부에 있는 HTML 태그를 뜻함

<div id="title">
	Hello!!
    <div style="display:none">HTML!!</div>
</div>

                   

innerText : 내부에 있는 텍스트(사용자에게 보여지는 텍스트만)

Hello!!

 

textContent : 내부에 있는 텍스트(모든 텍스트)

Hello!!
HTML!!

 

실제 코드 확인 시

console에서 찍으면 다음과 같이 나오는데 \n은 줄넘김 처리 때문에 출력된것으로 보면 된다.

 

중요한거는 html과 javascript가 연결되어 있으며, 객체 형태로 접근이 가능하고 수정도 가능하다는 점이다.