1. innerHTML
innerHTML은 요소의 내부 HTML 코드를 나타내는 속성입니다.
문자열로 HTML 마크업을 설정하거나 반환할 수 있습니다.
예를 들어, element.innerHTML = '<strong,>Hello</strong,>';와 같이 사용하여 요소 내부에 강조 표시된 "Hello"를 삽입할 수 있습니다.
이 속성은 HTML을 파싱하고 요소 내부에 새로운 요소를 생성하거나 기존 요소를 변경하는 데 사용됩니다.
2. innerText
innerText는 요소와 그 자식 요소들의 텍스트 콘텐츠를 나타내는 속성입니다.
HTML 마크업을 무시하고 텍스트만 다룹니다.
요소의 보이는 텍스트 콘텐츠만 설정하거나 반환합니다. 즉, 스타일로 숨겨진 텍스트는 무시됩니다.
예를 들어, <div,><strong,>Hello</strong,> World</div,>의 innerText는 "Hello World"가 됩니다.
이 속성은 텍스트 기반 콘텐츠를 조작하는 데 유용합니다.
3. textContent
textContent는 요소와 그 자식 요소들의 모든 텍스트 콘텐츠를 나타내는 속성입니다.
HTML 마크업을 무시하고 텍스트만 다룹니다.
요소의 보이는 텍스트나 스타일로 숨겨진 텍스트 모두를 설정하거나 반환합니다.
예를 들어, <div,><strong,>Hello</strong,> World</div,>의 textContent는 "Hello World"가 됩니다.
이 속성은 텍스트 기반 콘텐츠를 포함한 모든 내용을 조작하는 데 사용됩니다.
요약
innerHTML은 HTML 마크업을 다루는 데 사용되고, innerText와 textContent는 텍스트를 다루는 데 사용됩니다. innerText는 보이는 텍스트만 다루고, textContent는 보이는 텍스트와 숨겨진 텍스트를 모두 다룹니다. 선택하는 속성은 상황에 맞게 달라질 수 있습니다.
