[책] 자바스크립트 코드 레시피 278 - 134일차

자신을 포함한 HTML 요소 다루기

• 자신을 포함한 HTML 텍스트와 이미지의 태그를 변경하고 싶을 때

구문

요소.outerHTML 요소 HTML

설명

outerHTML 속성은 innerHTML과 달리 자신도 대상이 될 수 있으며, 자신의 HTML을 가져오거나 변경할 수 있습니다.

실습

index.html

<div>오늘의 날씨</div>
<p id="weather-information">비 <span class="temperature">16도</span></p>
<div class="tag-div-test">변경하기</div>

---

script.js

const weatherInformation = document.querySelector('#weather-information');
console.log(weatherInformation.outerHTML);
weatherInformation.outerHTML = '<img src="image_content.jpg"></img>';