Element.innerHTML
innerHTML
속성은
HTML 요소의 내부 HTML 콘텐츠를 가져오거나 설정합니다.
해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 읽어오거나 새롭게 변경할 수 있습니다.
innerHTML
속성은 특정 요소 내에 단순 콘텐츠를 동적으로 집어넣는 경우에 편리하고 유용합니다.
구문
값
innerHTML
의 값은 HTML 코드를 나타내는 문자열입니다.
이 값은 요소의 자식 요소 노드, 텍스트 노드, 주석 노드 등을 포함한 전체 HTML이나 XML 마크업 구조를 나타냅니다.
노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
예제
innerHTML
속성의 특징을 예제를 통해서 살펴보겠습니다.
가져오기
해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 가져옵니다.
해당 요소에 텍스트 노드만 있으면 텍스트를 가져옵니다.
만약 해당 요소가 비어있으면, 빈 문자열(""
)을 반환합니다.
innerHTML
속성을 사용하면 해당 요소와 그 자손 요소들에 포함된 모든 내용 가져옵니다.
예를 들어, 아래와 같은 HTML 요소가 있을 때
출력 값은 다음과 같습니다.
가져오기에서의 공백 문자 처리
위의 출력 값을 보면 알 수 있듯이 innerHTML
속성은 요소 내의 모든 콘텐츠를 있는 그대로 반환하거나 설정합니다. 따라서 공백 문자(Whitespace)도 중요한 부분으로 다루어지며, 공백이나 줄바꿈이 포함된 텍스트도 그대로 유지됩니다.
공백 문자(Whitespace):
문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 의미합니다. 일반적으로는 '띄어쓰기'라고 부릅니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈이 있습니다.
가져오기에서의 특수 문자 처리
innerHTML
속성은 HTML이나 XML 요소의 내부 구조를 가져오거나 설정하는 속성이기 때문에, 특수 문자들이 HTML 엔티티로 변환되어 반환합니다. HTML에서는 특정 문자(예: &
, <
, >
)가 태그나 엔티티로 인식되기 때문에, 이 문자를 그대로 표시하려면 HTML 엔티티로 변환해야 합니다.
&
은 &
, <
은 <
, >
은 >로 변환되어 HTML 내에서 안전하게 처리됩니다.
textContent
속성을 사용하면 HTML 엔티티로 변환되지 않은 원본 텍스트를 가져올 수 있습니다. 이는 브라우저가 렌더링하기 전에 있는 그대로의 문자열을 제공합니다.
설정하기
해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 설정합니다.
innerHTML
속성으로 설정할 경우 요소의 자식 요소, 텍스트 노드, 주석 등을 포함 모든 콘텐츠는 삭제되고 설정한 콘텐츠로 대체됩니다.
- 라면
- 김밥
- 돈까스
특정 요소의 콘텐츠 제거하기
특정 요소의 innerHTML
속성의 값을 빈 문자열(""
)로 설정하면 해당 요소의 모든 콘텐츠가 제거됩니다.
단순 콘텐츠를 동적으로 집어넣는 경우에 편리하고 유용
위의 예제처럼 innerHTML
속성으로 특정 요소의 콘텐츠를 설정할 때에는 단순 콘텐츠를 동적으로 집어넣는 경우에 편리하고 유용합니다.
innerHTML
속성으로 HTML 마크업 콘텐츠를 새로 대체하면 기존 콘텐츠를 모두 제거하고 다시 처음부터 새롭게 새로운 콘텐츠를 DOM에 반영합니다. 복잡한 작업에서는 다음과 같은 단점들이 있습니다.
innerHTML
을 사용해 콘텐츠를 설정하면 요소 내의 기존 내용이 모두 덮어쓰기 됩니다. 이로 인해 필요한 부분만 변경하는 작업은 불편할 수 있습니다.innerHTML
을 사용하면 브라우저가 요소의 전체 HTML을 다시 파싱하고 렌더링해야 하므로, 복잡한 구조나 대량의 데이터가 있을 때 성능 저하가 발생할 수 있습니다.
이처럼 innerHTML
속성으로는 요소 내의 기존 내용을 지우지 않고 새로운 요소나 텍스트를 추가하는 등의 복잡한 구조의 콘텐츠를 삽입할 때에는 유용하지가 않습니다.
insertAdjacentHTML()
함수는 기존의 요소에는 영향을 주지 않고 새로운 콘텐츠만을 HTML(혹은 XML)로 파싱하여 DOM 노드를 생성해서 삽입하기 때문에 복잡한 구조의 콘텐츠를 삽입할 때 빠르고 유용합니다.
<script>
태그가 실행되지 않도록 지정됨
HTML5에서는 innerHTML
속성으로 삽입된 <script>
태그가 실행되지 않도록 지정되어 있습니다. 이것은 보안적인 이유에서입니다.
그럼에도, innerHTML
속성으로 제어할 수 없는 문자열을 설정할 때에는 보안적인 측면을 항상 고려해야 합니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
innerHTML
|
1 | 12 | 1 | 1 |
명세서
명세서 사양 | |
---|---|
innerHTML
|
HTML Standard #dom-element-innerhtml |