2022. 7. 8. 18:24ㆍProgram/JavaScript
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
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트에서 요소 속성 다루기 (0) | 2022.07.11 |
---|---|
[JavaScript] 자바스크립트에서 자신을 포함한 HTML 요소 다루기 (0) | 2022.07.11 |
[JavaScript] 자바스크립트에서 텍스트 요소 다루기 (0) | 2022.07.08 |
[JavaScript] 자바스크립트에서 노드 교체하기 (0) | 2022.07.08 |
[JavaScript] 자바스크립트에서 요소 교체하기 (0) | 2022.07.08 |