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 스타일을 신경쓰지 않고 순수한 텍스트를 다룰 때 유용
- 텍스트 콘텐츠를 가져와서 문자열 처리를 해야 할 때 유용
