[자바스크립트] innerText와 innerHTML 차이점

 

 

 

 

자바스크립트에서 뭔가 값을 집어넣을때 제일 많이 사용해서

값을 넣을때 쓰는 속성이라 생각했는데 값을 불러오는 속성이었다😱

element.innerText;

이 속성은 element 안의 text 값들만을 가져옴

 

element.innerHTML;

innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옴

 

 

 

 

 

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

element.innerText에 html을 포함한 문자열을 입력하면, html코드가 문자열 그대로 element안에 포함

→ <div style='color:red'>A</div> 이대로 출력

 

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

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

위 예제에서 'innerHTML()'을 클릭하면, 입력된 html태그가 해석되어 빨간색A 가 나타나는 것을 확인
→ A 이렇게 출력

 

 

 

 

 

출처: https://hianna.tistory.com/480 [어제 오늘 내일]