먼저 getElementById()라는 메서드를 알아보겠다.
말그대로 getElementById()는 id로 element를 가져온다 라는뜻
코드
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!
</button>
</body>
</html>실행 전 모습
실행 후 모습
위의 코드에서 보았듯이 <p>태그의 id가 demo인걸 알수있고 버튼을 클릭하면 onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"' 이부분에 의해서 p태그 안의 내용이 바뀌는걸 알수 있다.
텍스트 뿐만 아니라 이미지 태그도 적용가능하다
코드
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">
Turn off the light
</button>
</body>
</html>실행전 모습
실행후 모습
'공부내용정리 > JavaScript' 카테고리의 다른 글
| JavaScript 반복문 (0) | 2021.03.28 |
|---|---|
| JavaScript 조건문 (0) | 2021.03.28 |
| JAVASCRIPT 내용 정리 (0) | 2021.03.25 |
| 자바스크립트 출력 (0) | 2021.03.12 |
| 자바스크립트의 위치 (0) | 2021.03.12 |