속성 outerHTML

속성 outerHTML는 태그와 함께 요소의 HTML 코드를 가져오고 변경할 수 있게 해줍니다.

구문

javascript요소.outerHTML;

예제

속성 outerHTML를 사용하여 요소의 텍스트를 출력해 봅시다:

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

코드 실행 결과:

javascript'<p id="elem">text</p>'

예제

단락 대신 동일한 텍스트를 가진 div를 만들어 봅시다:

html<p id="elem">text</p>
javascriptlet elem = document.querySelector('#elem');
elem.outerHTML = '<div>' + elem.innerHTML + '</div>';

코드 실행 결과:

html<div>text</div>

같이 보기

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