innerHTML, innerText, textContent 차이점

node나 element의 텍스트값을 읽어오고 설정하는 속성들에 대해서 알아보자.

innerHTML

innerHTML은 element 안의 HTML이나 XML을 가져오거나 설정할 수 있다.

document.body.innerHTML = `<div style='color:red'>   Hello   <span style="display: none;">반갑습니다</span></div>`;

console.log(document.body.innerHTML);

<div style='color:red'> Hello <span style="display: none;">반갑습니다</span></div> 코드가 HTML 태그로 작성이 되어 빨간색 글씨의 'hello'만 보인다.
innerHTML로 가져올때는 요소 안에 있는 HTML 전체 내용을 그대로 가져온다.

innerText

element 안의 text 값들만을 가져온다.
사용자에게 보여지는 텍스트 값을 가져오기 때문에 여러개의 띄어쓰기가 있더라도 하나의 띄어쓰기만 한 것 처럼 보인다.

document.body.innerText = `<div style='color:red'>   Hello   <span style="display: none;">반갑습니다</span></div>`;

console.log(document.body.innerText);

html코드가 문자열 그대로 element안에 들어가 <div style='color:red'> Hello <span style="display: none;">반갑습니다</span></div>로 출력된다.

textContent

'Node'의 속성으로, <script>나 <style> 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 읽어온다.

document.body.textContent = `<div style='color:red'>   Hello   <span style="display: none;">반갑습니다</span></div>`;

console.log(document.body.textContent);

innerText와 같이 <div style='color:red'> Hello <span style="display: none;">반갑습니다</span></div>가 출력된다.
값을 가져올 때는 입력한 띄어쓰기가 그대로 유지된다.