[JavaScript] 자바스크립트에서 요소 내부 HTML 다루기

146_자바스크립트에서 요소 내부 HTML 다루기

[적용]

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

---

[문법]

속성	의미	타입
요소.innerHTML	요소 내부 HTML 문자열	문자열

---

[내용]

innerHTML 속성으로 요소의 HTML을 변경하거나 속성을 가져올 수 있다.

innerHTML은 Node 객체인 노드 .textContent와 다르게 Element 객체의 속성이다.

태그를 포함한 문자열 HTML을 가져오는 다음의 예시를 확인해 보자.

 

HTML                                                                                                                                                              index.html

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

JavaScript                                                                                                                                                          main.js

const weatherInformation = document.querySelector('#weather-information');

// 다음의 문자열 출력
// 비<span id="weather-information".(16도)
console.log(weatherInformation.innerHTML);

---

[예시]

화면 표시 3초후 #weather 요소 내 HTML을 변경하는 예시를 확인해 보자.

 

HTML                                                                                                                                                              index.html

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

CSS                                                                                                                                                                      style.css

#weather strong { 
  color: d03939;
}

JavaScript                                                                                                                                                          main.js

const weatherElement = document.querySelector('#weather');

// 3초후 #weather 내용 변경
setTimeout(() => {
  weatherElement.innerHTML = '기온은<strong>-3도</strong>가 예상됩니다.';
}, 3000);

 

실행결과

3초 후 HTML 내용이 변경된다.

문자열이 아닌 HTML 코드이므로 CSS 스타일 설정이 가능하다.

---

 

 

 

 

 

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