HTML DOM Element innerHTML 속성

정의와 사용법

innerHTML 속성을 설정하거나 요소의 HTML 내용(내부 HTML)을 반환합니다.

기타 참조:

innerText 속성

textContent 속성

예제

예제 1

id="myP" 요소의 HTML 내용을 가져옵니다：

let html = document.getElementById("myP").innerHTML;

본인이 직접 시도해 보세요

예제 2

id="demo" 요소의 HTML 내용을 변경합니다：

document.getElementById("demo").innerHTML = "I have changed!";

본인이 직접 시도해 보세요

예제 3

id="myList"의 <ul> 요소의 HTML 내용을 가져옵니다：

let html = document.getElementById("myList").innerHTML;

본인이 직접 시도해 보세요

예제 4

id="demo"의 <p> 요소의 HTML 내용을 지웁니다：

element.innerHTML = "";

본인이 직접 시도해 보세요

예제 5

두 요소의 HTML 내용을 변경합니다：

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

본인이 직접 시도해 보세요

예제 6

요소의 HTML 내용을 반복합니다:

element.innerHTML += element.innerHTML;

본인이 직접 시도해 보세요

예제 7

링크의 HTML 내용과 URL 변경:

element.innerHTML = "W3School";
element.href = "";

본인이 직접 시도해 보세요

문법

innerHTML 속성 반환:

element.innerHTML

innerHTML 속성 설정:

element.innerHTML = text

속성 값

값 설명
문자열. HTML 내용

반환 값

타입 설명
문자열 요소의 HTML 내용

innerHTML, innerText, textContent의 차이

innerText 속성이 반환합니다:

요소와 모든 자식의 텍스트 내용만 반환하고, CSS 숨겨진 텍스트 공간과 태그는 제외됩니다. <script>과 <style> 요소를 제외합니다.

innerHTML 속성이 반환합니다:

요소의 텍스트 내용, 모든 공백과 내부 HTML 태그가 포함됩니다.

textContent 속성이 반환합니다:

요소와 모든 자식의 텍스트 내용, 공백과 CSS 숨겨진 텍스트가 포함되며 태그는 없습니다.

HTML 예제

<p id="myP">   이 요소는 추가 공간이 있으며 <span>span 요소</span>를 포함하고 있습니다.</p>

JavaScript 예제

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

본인이 직접 시도해 보세요

위의 예제에서:

innerText 속성이 반환합니다:

이 요소는 추가 공간이 있으며 span 요소를 포함하고 있습니다.

innerHTML 속성이 반환합니다:

   이 요소는 추가 공간이 있으며 <span>span 요소</span>를 포함하고 있습니다.

textContent 속성이 반환합니다:

   이 요소는 추가 공간이 있으며 span 요소를 포함하고 있습니다.

브라우저가 지원합니다

모든 브라우저가 지원합니다 element.innerHTML：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원 지원