innerHTML vs innerText vs textContent

hianna.tistory.com/483

[Javascript] innerHTML, innerText, textContent 차이점

 

일단 간단하게

innerHTML은 해당 개체 안에 있는 모든 것.

innerText는 보여지는 부분만

textContent는 모든 텍스트만 긁어온다고 이해하자.

 

---------------------------------------------------------

책보고 업데이트했다.

 

innerText의 성능 문제로 textContent를 IE9이후나 최신 웹브라우저에서는 사용하는 것이 좋다.

즉,

HTML요소까지 함께 넣으면서 추가할때는 innerHTML을 사용하고

단순 텍스트만 사용할 때는 textContent를 사용하자.

<script>
	const test = document.querySelector('#test');
    test.innerHTML = '<h1> 테스트입니다. </h1>'
    test.textContent = '<h1> 테스트입니다. </h1>' // 이게 신 버전
    
    test.innerText = '<h1> 테스트입니다. </h1>' // 이게 구 버전
</script>

<p id="test">test</p>