innerHTML vs innerText vs textContent vs html() vs text()

JS에서는 HTML코드와 렌더링된 텍스트 두 계열(임의 용어)의 데이터가 있다.
HTML코드 <span>&lt;</span>는 < 와 같이 렌더링되며,
렌더링된 텍스트<span>은 HTML로 변환하면 &lt;span&gt;와 같이 된다.
이 차이를 이해했다면 다음 용어들이 왜 구분되어 쓰이는지 알 수 있을 것이다.

• element.innerHTML
• $(element).html()  --권장
• element.innerText  --권장하지 않음
• element.textContent
• $(element.).text()  --권장

앞의 2개는 HTML코드를 다루며, 나머지는 렌더링된 텍스트를 다룬다.
innerHTML과 innerText는 IE에서 출발한 속성으로, innerHTML은 널리 쓰이지만 innerText는 파이어폭스에서 지원하지 않으므로 반드시 textContent를 대신 사용하기를 권장한다.
또한 jQuery에 비해 innerHTML이 오류가 발생하는 경우가 다반사이기 때문에 웬만하면 jQuery의 html()과 text()를 사용할 것을 권한다.
참고로 텍스트 변환 기준과 값을 불러올 때 주석을 같이 불러올지 여부와 CSS 반영 여부가 각각 조금씩 다르므로 반드시 고려해야 한다.