innerHtml과 innerText

js로, html 태그를 생성하다보면 innerHtml와 innerText를 많이 사용하게 된다.

겉으로 보기엔 똑같은 일을 하는 함수같은데 차이가 뭘까?

innerHTML은 문자열을 HTML 태그로 삽입하고,
innerText는 문자열을 text node로 삽입힌다.

divTag.innerHTML = '<h2>Hello World</h2>';

하면

Hello World

가 출력되지만

divTag.innerText = '<h2>Hello World</h2>';

하면<h2>Hello World</h2>가 그대로 화면에 출력되어버린다.