textContent, innerText, innerHTML

자바스크립트에서 엘리먼트에 값을 추가할 수 있는 방법 3가지가 있다.
차이점을 알아보고 어떤상황에서 어떤것을 사용해야하는지 생각해보자.

결론부터 얘기하면 되도록 textContent를 사용하면 된다.

이유는 만들어진지 오래되어서 범용성이 높고, 빠르고, 거기다 보안성도 좋다고 한다.

다음으로는 innerText

렌더링된(화면에 보이는 그대로의) 텍스트를 불러오고 싶을 때 사용하면 된다.
예시)

<p>     This     is a difference      got it    ? </p>

let dif = document.querySelector('p').innerText;
console.log(dif); // This is a difference got it ?

let diff = document.querySelector('p').textContent;
console.log(diff); //      This     is a difference      got it    ? 

마지막인 innerHTML은 속도도 느리고 보안상에 문제도 있다고 하여 굳이 사용할 필요는 없는것 같다.