[JS] innerHTML vs innerText

 JS는 이미 html과 연결되어있다. 콘솔창에 document라고 치면 html 속성들을 불러올 수 있음

 

 

innerHTML vs innerText

---

element.innerText;

이 속성은 element 안의 text 값들만을 가져옵니다.

element.innerHTML;

innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옵니다.

 

element.innerText = "<div style='color:red'>A</div>";

element.innerText에 html을 포함한 문자열을 입력하면, 

html코드가 문자열 그대로 element안에 포함됩니다.

 

element.innerHTML = "<div style='color:red'>A</div>";

위와 같이 element.innerHTML 속성에 html코드를 입력하면,

html element가 element안에 포함되게 됩니다.

위 예제에서 'innerHTML()'을 클릭하면,

입력된 html태그가 해석되어 빨간색A 가 나타나는 것을 확인 할 수 있습니다.