JS를 사용하여 HTML 삽입하기
Coddy의 움직이는 구름 - HTML/CSS/JS 프로젝트 코스 레슨 — 18개 중 15번째.
다음 두 레슨에서는 JavaScript를 사용하여 구름을 주입해 보겠습니다!
document.getElementById() 메서드는 id 속성이 지정된 문자열과 일치하는 요소를 나타내는 요소 객체를 반환합니다. 요소 ID는 지정된 경우 고유해야 하므로, 특정 요소에 빠르게 접근하는 유용한 방법입니다. 예를 들어:
const elem = document.getElementById("myid");다음 예제는 id가 “myid”인 요소를 가져와서 elem이라는 변수에 저장합니다.
요소 객체를 가져온 후에는 해당 요소의 inner HTML을 교체할 수 있습니다:
elem.innerHTML = '<p>Hello!</p>';예를 들어, HTML 코드가 다음과 같다면:
<div id="myid">
</div>위의 주입 후에는 HTML 코드가 다음과 같이 보일 것입니다:
<div id="myid">
<p>Hello!</p>
</div>
챌린지
쉬움여러분의 작업은 id가 "container"(우리의 클라우드 컨테이너)인 엘리먼트 안에 "Some text"라는 텍스트를 가진 h1 태그를 주입하는 것입니다.
기존에 작성한 코드를 삭제하지 말고, JavaScript 파일의 시작 부분에 새로운 코드를 추가하세요.
참고: 이 작업은 기존의 클라우드 엘리먼트를 덮어쓰게 됩니다. 걱정하지 마세요, 다음 레슨에서 클라우드를 다시 불러올 것입니다.
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>