HTML DOM innerHTML 속성
예시
id="demo"를 사용하여 <p> 요소의 HTML 콘텐츠를 변경합니다.
document.getElementById("demo").innerHTML = "Paragraph changed!";
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
innerHTML 속성은 요소의 HTML 콘텐츠(내부 HTML)를 설정하거나 반환합니다.
브라우저 지원
Property | |||||
---|---|---|---|---|---|
innerHTML | Yes | Yes | Yes | Yes | Yes |
통사론
innerHTML 속성을 반환합니다.
HTMLElementObject.innerHTML
innerHTML 속성을 설정합니다.
HTMLElementObject.innerHTML = text
속성 값
Value | Description |
---|---|
text | Specifies the HTML content of an element |
기술적 세부 사항
반환 값: | 요소의 HTML 내용을 나타내는 문자열 |
---|
더 많은 예
예시
id="myP"인 <p> 요소의 HTML 콘텐츠를 가져옵니다.
var x = document.getElementById("myP").innerHTML;
예시
id="myList"인 <ul> 요소의 HTML 콘텐츠를 가져옵니다.
var x = document.getElementById("myList").innerHTML;
예시
두 요소의 HTML 콘텐츠를 변경합니다.
document.getElementById("myP").innerHTML = "Hello Dolly.";
document.getElementById("myDIV").innerHTML = "How are you?";
예시
id="demo"인 <p> 요소의 HTML 콘텐츠 경고:
alert(document.getElementById("demo").innerHTML);
예시
id="demo"인 <p> 요소의 HTML 콘텐츠 삭제:
document.getElementById("demo").innerHTML = ""; // Replaces the content of <p> with an empty string
예시
HTML 콘텐츠, URL 및 링크 대상 변경:
document.getElementById("myAnchor").innerHTML = "W3Schools";
document.getElementById("myAnchor").href = "https://www.w3schools.com";
document.getElementById("myAnchor").target = "_blank";
❮ 요소 개체