innerHTML, innerText, textContent 비교

1. innerHTML:
   • innerHTML은 해당 요소의 내부 HTML 코드를 나타냅니다. 즉, HTML 태그와 텍스트 모두를 가져오거나 설정할 수 있습니다.
   • 이 속성을 사용하여 요소의 내용을 HTML 문자열로 설정하거나 해당 요소 안에 새로운 HTML 구조를 동적으로 생성할 수 있습니다.
   • 예를 들어, element.innerHTML = "<strong>Hello</strong>";와 같이 사용할 수 있습니다.
   • 주의: 내부 HTML을 수정하는 것은 보안 문제를 야기할 수 있으므로 신중하게 다루어야 합니다.
2. innerText:
   • innerText는 요소의 텍스트 내용을 나타냅니다. HTML 태그는 무시되며, 순수한 텍스트만을 가져오거나 설정할 수 있습니다.
   • 이 속성을 사용하여 요소의 텍스트 내용을 수정하거나 가져올 수 있습니다.
   • 예를 들어, element.innerText = "Hello";와 같이 사용할 수 있습니다.
   • 사용자가 볼 수 있는 텍스트만 다루고 싶을 때 주로 사용됩니다.
3. textContent:
   • textContent는 요소의 텍스트 내용을 나타냅니다. innerText와 유사하지만, 차이점이 있습니다.
   • textContent는 숨겨진(styled="display:none" 등) 요소의 내용을 포함한 모든 텍스트 내용을 반환합니다.
   • HTML 태그를 무시하며, 순수한 텍스트만을 다룹니다.
   • 예를 들어, element.textContent = "Hello";와 같이 사용할 수 있습니다.
   • textContent는 보이지 않는 요소의 내용을 다룰 때 유용합니다.

요약하면

innerHTML은 HTML을 포함한 모든 내용을 다루는 데 사용되며,

innerText는 텍스트만 다루고,

textContent는 텍스트와 숨겨진 내용까지 다룹니다.