속성 innerHTML

속성 innerHTML은 요소의 HTML 코드를 가져오고 변경할 수 있게 합니다.

구문

javascript요소.innerHTML;

예시

요소의 HTML 코드를 출력해 봅시다:

html<p id="elem"><b>text</b></p>
javascriptlet elem = document.querySelector('#elem');
console.log(elem.innerHTML);

코드 실행 결과:

javascript'<b>text</b>'

예시

HTML 코드를 새로운 코드로 변경해 봅시다:

html<p id="elem"><b>text</b></p>
javascriptlet elem = document.querySelector('#elem');
elem.innerHTML = '<i>!!!</i>';

코드 실행 결과:

html<p id="elem"><i>!!!</i></p>

참고 항목

  • 요소의 텍스트를 포함하는 속성 textContent,
  • 요소의 외부 HTML 코드를 포함하는 속성 outerHTML,