Element.innerHTML

innerHTML 속성은
HTML 요소의 내부 HTML 콘텐츠를 가져오거나 설정합니다.

해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 읽어오거나 새롭게 변경할 수 있습니다.

innerHTML 속성은 특정 요소 내에 단순 콘텐츠를 동적으로 집어넣는 경우에 편리하고 유용합니다.

구문

JavaScript 
/* 가져오기 */
const content = element.innerHTML;

/* 설정하기 */
element.innerHTML = htmlString;

값

innerHTML의 값은 HTML 코드를 나타내는 문자열입니다.
이 값은 요소의 자식 요소 노드, 텍스트 노드, 주석 노드 등을 포함한 전체 HTML이나 XML 마크업 구조를 나타냅니다.

노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.

예제

innerHTML 속성의 특징을 예제를 통해서 살펴보겠습니다.

가져오기

해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 가져옵니다.
해당 요소에 텍스트 노드만 있으면 텍스트를 가져옵니다.

HTML 
<p id="a">환영합니다!</p>
JavaScript 해당 요소에 텍스트 노드만 있으면 텍스트를 가져옵니다. 
const ele = document.getElementById("a");
console.log(ele.innerHTML); // "환영합니다!"

코드 부연설명
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다.

만약 해당 요소가 비어있으면, 빈 문자열("")을 반환합니다.

HTML 
<p id="a"></p>
JavaScript 만약 해당 요소가 비어있으면, 빈 문자열("")을 반환합니다. 
const ele = document.getElementById("a");
console.log(ele.innerHTML); // ""

innerHTML 속성을 사용하면 해당 요소와 그 자손 요소들에 포함된 모든 내용 가져옵니다.
예를 들어, 아래와 같은 HTML 요소가 있을 때

HTML 
<div id="example">
    <!-- 주석입니다. -->
    일반 텍스트입니다.
    <p>안녕하세요</p>
    <span>여기는 예시입니다.</span>
</div>
JavaScript 
const element = document.getElementById("example");
console.log(element.innerHTML);

출력 값은 다음과 같습니다.

출력 값 문자열로 출력됩니다. 들여쓰기(Tab)나 줄바꿈 등의 공백 문자도 그대로 반영됩니다. 
    <!-- 주석입니다. -->
    일반 텍스트입니다.
    <p>안녕하세요</p>
    <span>여기는 예시입니다.</span>
가져오기에서의 공백 문자 처리

위의 출력 값을 보면 알 수 있듯이 innerHTML 속성은 요소 내의 모든 콘텐츠를 있는 그대로 반환하거나 설정합니다. 따라서 공백 문자(Whitespace)도 중요한 부분으로 다루어지며, 공백이나 줄바꿈이 포함된 텍스트도 그대로 유지됩니다.

공백 문자(Whitespace):
문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 의미합니다. 일반적으로는 '띄어쓰기'라고 부릅니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈이 있습니다.

가져오기에서의 특수 문자 처리

innerHTML 속성은 HTML이나 XML 요소의 내부 구조를 가져오거나 설정하는 속성이기 때문에, 특수 문자들이 HTML 엔티티로 변환되어 반환합니다. HTML에서는 특정 문자(예: &, <, >)가 태그나 엔티티로 인식되기 때문에, 이 문자를 그대로 표시하려면 HTML 엔티티로 변환해야 합니다.

HTML 특수 문자 사용법과 의의 – 예약된 문자와의 충돌을 피하며 웹 콘텐츠 작성하기를 참고하세요!

<p>, <span>과 같은 요소가 &, <, > 등과 같은 특수 문자를 포함하는 텍스트 노드를 자식으로 가지고 있을 때, innerHTML은 이러한 문자를 각각 HTML 엔티티로 변환하여 가져옵니다.

&은 &amp;, <은 &lt;, >은 &gt;로 변환되어 HTML 내에서 안전하게 처리됩니다.

HTML 
<div id="example">& < > 텍스트</div>
JavaScript 
const element = document.getElementById('example');
console.log(element.innerHTML); // 출력: "& < > 텍스트"

textContent 속성을 사용하면 HTML 엔티티로 변환되지 않은 원본 텍스트를 가져올 수 있습니다. 이는 브라우저가 렌더링하기 전에 있는 그대로의 문자열을 제공합니다.

JavaScript 
const element = document.getElementById('example');
console.log(element.textContent); // 출력: "& < > 텍스트"

설정하기

해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 설정합니다.
innerHTML 속성으로 설정할 경우 요소의 자식 요소, 텍스트 노드, 주석 등을 포함 모든 콘텐츠는 삭제되고 설정한 콘텐츠로 대체됩니다.

HTML 
<ul id="food">
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
</ul>
<button type="button" id="btn">메뉴 바꾸기</button>
JavaScript 
const food = document.getElementById("food");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    food.innerHTML = `
        <li>짜장면</li>
        <li>짬뽕</li>
        <li>우동</li>
    `;
});
실제 적용된 모습 '버튼'을 실제로 클릭해 보세요!
특정 요소의 콘텐츠 제거하기

특정 요소의 innerHTML 속성의 값을 빈 문자열("")로 설정하면 해당 요소의 모든 콘텐츠가 제거됩니다.

JavaScript 
element.innerHTML = "";  // 요소 내부가 비워짐( 제거됩니다.)
단순 콘텐츠를 동적으로 집어넣는 경우에 편리하고 유용

위의 예제처럼 innerHTML 속성으로 특정 요소의 콘텐츠를 설정할 때에는 단순 콘텐츠를 동적으로 집어넣는 경우에 편리하고 유용합니다.

innerHTML 속성으로 HTML 마크업 콘텐츠를 새로 대체하면 기존 콘텐츠를 모두 제거하고 다시 처음부터 새롭게 새로운 콘텐츠를 DOM에 반영합니다. 복잡한 작업에서는 다음과 같은 단점들이 있습니다.

  • innerHTML을 사용해 콘텐츠를 설정하면 요소 내의 기존 내용이 모두 덮어쓰기 됩니다. 이로 인해 필요한 부분만 변경하는 작업은 불편할 수 있습니다.
  • innerHTML을 사용하면 브라우저가 요소의 전체 HTML을 다시 파싱하고 렌더링해야 하므로, 복잡한 구조나 대량의 데이터가 있을 때 성능 저하가 발생할 수 있습니다.

이처럼 innerHTML 속성으로는 요소 내의 기존 내용을 지우지 않고 새로운 요소나 텍스트를 추가하는 등의 복잡한 구조의 콘텐츠를 삽입할 때에는 유용하지가 않습니다.

insertAdjacentHTML() 함수는 기존의 요소에는 영향을 주지 않고 새로운 콘텐츠만을 HTML(혹은 XML)로 파싱하여 DOM 노드를 생성해서 삽입하기 때문에 복잡한 구조의 콘텐츠를 삽입할 때 빠르고 유용합니다.

<script> 태그가 실행되지 않도록 지정됨

HTML5에서는 innerHTML 속성으로 삽입된 <script> 태그가 실행되지 않도록 지정되어 있습니다. 이것은 보안적인 이유에서입니다.

그럼에도, innerHTML 속성으로 제어할 수 없는 문자열을 설정할 때에는 보안적인 측면을 항상 고려해야 합니다.

JavaScript 
const name = "<img src='x' onerror='document.cookie)'>";
el.innerHTML = name;

브라우저 호환성

innerHTML 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
innerHTML 1 12 1 1

명세서

innerHTML 속성의 명세서 사양
명세서 사양
innerHTML HTML Standard
#dom-element-innerhtml

참고문헌

같이 보기