[JavaScript] 자바스크립트에서 자신을 포함한 HTML 요소 다루기

147_자바스크립트에서 자신을 포함한 HTML  요소 다루기

[적용]

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

---

[문법]

속성	의미	타입
요소.outerHTML	요소 HTML	문자열

---

[내용]

outerHTML 속성은 innerHTML과 달리 자신도 대상이 될 수 있으며,

자신의 HTML을 가져오거나 변경할 수 있다.

 

HTML                                                                                                                                                              index.html

<h1>오늘의 날씨</h1>
<p id="weather-information">비<span class="temperature">(16도)
</span></p>

JavaScript                                                                                                                                                          main.js

const weaterInformation =
  document.querySelector('#weather-information');
  
// 다음의 문자열 출력
// <p id="weather-information">비<span class="temperature">(16도)</span></p>
console.log(weatherInformation.outerHTML);

// <p id="weather-information"></p> 부분을 img 요소로 변경
weatherInformation.outerHTML = '<img src=sample-image.png">';

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김