[JS] innerHTML, innerText, textContent 각각의 차이점에 대해

예제를 진행하면서 자주 등장하는 이 세가지의 기능이 무엇이 다른지 궁금해서 알아보았다. 

 

// HTML 이 다음과 같다고 가정할 때, 
<div id="statement">
	Keep Calm and          Drink <strong>Coffee</strong>
	<span style="display:none">Sometimes, Tea</span>
</div>

// JavaScript
const statement = document.querySelector('#statement');

statement.innerHTML; // <div id="statement">Keep Calm and          Drink <strong>Coffee</strong><span style="display:none">Sometimes, Tea</span></div>

statement.innerText; // Keep Calm and Drink Coffee

statement.textContent; // Keep Calm and          Drink CofeeSometimes, Tea

 

위의 하나의 코드만으로도 세가지의 차이점을 명확하게 알 수 있다고 생각한다. 

예시를 아주 잘 들었다. 

 

해당 코드를 빌려온 블로그의 출처는 다음과 같다. 

 

velog.io/@minjae-mj/Javascript-value-vs-textContent-innerHTML-innerText

Javascript: value vs textContent, innerHTML, innerText