innerHTML, textContent, innerText

셋 다 문장을 넣어주는 메소드인데, 뭐가 다르고 뭐를 써야할까?

 

일단 innerHTML은 보안이슈때문에 사용을 지양해야 한다.

innerHTML은 전달된 내용을 HTML로parsing(= 구문 분석. 문장을 구성 성분으로 쪼개고 분석해서 문장의 구조를 결정한다.)하기 때문이다. 따라서 MDN에서는 HTML로 parsing을 하지 않는 textContent를 권장하고 있다. (Security considerations from MDN)

 

그렇다면 textContent와 innerText의 차이점은 무엇일까? (출처: innerText & textContent, from MDN)

• textContent 는 모든 요소의 콘텐츠를 가져온다. 반면 innerText는 웹상에서 유저가 '읽을 수 있는' 요소를 가져온다.
  • textContent는 <style>, <script> 요소도 가져온다. 
  • innerText는 만일 display: none으로 설정된 요소가 있다면 그 요소는 사람이 읽을 수 없는 상태이므로 가져오지 않는다.  
    • 다만 innerText는 CSS 속성도 고려해서 요소를 가져오기 때문에 reflow(페이지 부분 혹은 전체를 다시 한 번 훑기) 비용이 비싸다. 
    • 또한 innerText를 수정하면 요소의 모든 자식 node를 없애버린다.. 그럼 재사용 불가.

따라서 textContent 를 우선 사용하고, 경우에 따라 innerText를 선택적으로 사용해야겠다. 

 

++추가

동적으로 html 요소를 만드는 방식에는 .innerHTML이 필요하다!