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

요소 내부 HTML 다루기

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

구문

요소.innerHTML 요소 내부 HTML 문자열

설명

innerHTML 속성으로 요소의 HTML을 변경하거나 속성을 가져올 수 있습니다. innerHTML 은 Node 객체인 노드 .textContent와 다르게 Element 객체의 속성입니다. 태그를 포함한 문자열 HTML을 가져오는 다음의 샘플을 확인합니다.

실습

index.html

<p id="weather">내일은 눈이 옵니다.</p>

---

style.css

#weather strong {
  color: #d03939;
}

---

script.js

const weatherElement = document.querySelector('#weather');
console.log(weatherElement);
setTimeout(() => {
    weatherElement.innerHTML = '기온은 <strong>-3도</strong>가 예상됩니다.';
}, 3000);