JavaScript_ES6_Study [ innerHTML, innerText, textContent ]

#
JavaScript
#
Study

innerHTML, innerText, textContent 중에 뭐 쓰는 게 좋을까?

결론: 요구사항에 맞게 선택하는 것이 중요합니다.

  • 일반적으로 textContent를 사용하는 것이 가장 안전하고 일관된 결과를 제공합니다.
  • innerText는 CSS 스타일을 고려해야 하는 경우에 유용합니다.
  • innerHTML은 HTML 마크업을 다룰 때 유용합니다.

innerHTML
  • 요소의 내부 HTML을 설정하거나 가져오는 데 사용합니다.
  • HTML을 파싱하고 렌더링하는 과정을 거치기 때문에 보안 문제 발생 가능성이 있습니다.
  • 사용자로부터 입력된 값을 동적으로 설정하는 경우, 이를 통해 악의적인 스크립트가 주입될 수 있으므로 주의가 필요합니다.

innerText
  • 요소의 텍스트 콘텐츠를 설정하거나 가져올 때 사용합니다.
  • HTML을 파싱하지 않기 때문에 보안 문제가 줄어들고, 렌더링 성능도 향상될 수 있습니다.
  • 또한, 스타일링을 무시하고 순수한 텍스트를 다룰 때에도 유용합니다.
    • 비표준입니다.
    • CSS에 순종적입니다.
    • 예를 들어 CSS에 의해 비표시(visibility: hidden;)로 지정되어 있다면 텍스트가 반환되지 않습니다.
    • CSS를 고려해야 하므로 textContent 프로퍼티보다 느립니다.

textContent
  • 비표준이 아닌 표준 기능입니다.
  • 요소의 모든 텍스트 콘텐츠를 가져오거나 설정이 가능합니다.
  • HTML 구조나 CSS 스타일을 고려하지 않기 때문에 보다 일관된 결과를 얻을 수 있으며, 일반적으로 innerText보다 빠릅니다.

정리

1. innerText:

텍스트 콘텐츠를 설정하거나 가져올 때 사용합니다.

  • CSS 스타일을 고려하여 렌더링된 텍스트를 반환합니다.
  • 비표준이므로 브라우저 간에 일관된 동작을 보장하지 않을 수 있습니다.
  • 사용자 입력이나 동적으로 생성된 텍스트를 다루는 데 유용합니다.
  • CSS에 의해 비표시로 지정된 요소의 경우 텍스트가 반환되지 않을 수 있습니다.

2. innerHTML:

요소의 내부 HTML을 설정하거나 가져올 때 사용합니다.

  • HTML 문자열을 파싱하여 요소 내부에 적용하므로 보안 상 주의가 필요합니다.
  • 동적으로 HTML을 생성하거나 수정해야 할 때 유용합니다.
  • 템플릿 생성이나 HTML 마크업을 다루는 데 유용합니다.

3. textContent:

요소의 텍스트 콘텐츠를 설정하거나 가져올 때 사용합니다.

  • HTML 구조나 CSS 스타일을 고려하지 않고 텍스트를 반환합니다.
  • 표준 속성으로 브라우저 간 일관된 동작을 제공합니다.
  • HTML 구조나 CSS 스타일을 신경쓰지 않고 순수한 텍스트를 다룰 때 유용합니다.
  • 텍스트 콘텐츠를 가져와서 문자열 처리를 해야 할 때 유용합니다.