innerHTML , innerText 차이점

innerHTML, innerText, textContent

위 메서드들은 텍스트 값을 읽어오고 설정할 수 있다는 점에서 서로 비슷하다.

하지만 각자 차이점이 존재하므로 이를 정리하고자 한다.

 

예시

<p id="test">
  <style>#test { color: red; }</style>
  안녕하세요. <br>테스트<br>입니다.
  <span style="display:none">숨겨진 글</span>
</p>

const test = document.getElementById("test");

console.log(test.innerHTML)
console.log(test.innerText)
console.log(test.textContent)

 

1. Element.innerHTML

  <style>#test { color: red; }</style>
안녕하세요. <br>테스트<br>입니다.
  <span style="display:none">숨겨진 글</span>

innerHTML은 해당 요소에 포함된 HTML, XML의 전체 내용을 읽어오거나 설정할 수 있다.

결과를 보면 HTML 코드 내의 공백까지도 출력된 것을 볼 수 있다.

 

2. Node.innerText

안녕하세요.
테스트
입니다.

innerText는 해당 요소와 그 자손의 텍스트가 렌더링 된 결과를 나타낸다.

예시를 보면 줄 바꿈이 반영되고 display: none으로 설정된 '숨겨진 글'이 안 보이는 것을 확인할 수 있다.

 

이처럼 사용자가 브라우저의 내용을 복사했을 때 보일 모습에 가장 근사한 결과를 나타낸다.

 

3. Node.textContent

  #test { color: red; }
안녕하세요. 테스트입니다.
  숨겨진 글

textContent는 노드와 그 자손의 텍스트 콘텐츠를 표시한다.

 

innetText와의 차이점

TextContent는 <script>나 <style> 태그를 포함한 노드 모든 요소의 콘텐츠를 반환한다.

반면 innerText는 사람이 읽을 수 있는 요소만 반환한다. 즉 보이지 않을 요소들의 텍스트는 반환하지 않는다.

 

innerHTML과의 차이점

innerHTML은 말 그대로 HTML의 전체 내용을 반환한다.

하지만 textContent는 HTML을 제외한 텍스트만 가져오기 때문에 innerHTML을 사용해 텍스트를 가져오는 것보다 성능이 더 좋다.

 

게다가 textContent는 XSS(Cross-site scripting) 공격의 위험이 없다.

따라서 일반 텍스트를 삽입할 때는 가급적 textContent를 사용하는 게 좋다.

 

XSS 공격 (Cross-site scripting)

공격자가 사이트에 스크립트를 넣어서 공격하는 기법을 의미한다.

접속한 사용자는 삽입된 코드가 실행되어 의도치 않은 행동을 하거나 민감한 정보를 탈취당할 수 있다.