참고 영상
HTML (스크립트 둘 중 하나는 head에, 하나는 body에 넣음)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 3px solid #000;
padding: 10px 0;
}
</style>
<script>
document.write('head에 넣은 자바스크립트');
document.getElementById('text01').innerText = "아이디값을 가져온 후 아이디 정의하기";
</script>
</head>
<body>
<div>
<div id="text01">text01</div>
<div id="text02">text02</div>
<h1 id="title">자바스크립트 적용위치 비교</h1>
<script>
document.write('body에 넣은 자바스크립트');
document.getElementById('text02').innerText = "아이디 정의 후 아이디값 가져오기";
</script>
</div>
</body>
</html>
결과
HTML (스크립트 둘 다 id를 정의한 구문 아래에 넣음)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 3px solid #000;
padding: 10px 0;
}
</style>
<script>
document.write('head에 넣은 자바스크립트');
</script>
</head>
<body>
<div>
<div id="text01">text01</div>
<div id="text02">text02</div>
<h1 id="title">자바스크립트 적용위치 비교</h1>
<script>
document.write('body에 넣은 자바스크립트');
document.getElementById('text01').innerText = "#text01 아이디 정의 후 아이디값 가져오기";
document.getElementById('text02').innerText = "#text02 아이디 정의 후 아이디값 가져오기";
</script>
</div>
</body>
</html>
- document.getElementById('text02').innerText = ''; getElementById('') 안에 #text02 이렇게 쓰지 않기
- 아이디 먼저 만들어주고 그 아래에 getElementById를 써야 아이디값을 얻어올 수 있다
'Study > JavaScript' 카테고리의 다른 글
| [JS] 자바스크립트 기초 - 대화상자를 띄우는 명령어 alert(), confirm() (0) | 2020.07.28 |
|---|---|
| [JS] 자바스크립트 기초 - 대화상자를 띄우는 명령어 prompt() (0) | 2020.07.27 |
| [JS] 자바스크립트 기초 - 변수 대소문자 구분 (0) | 2020.07.23 |
| [JS] 자바스크립트 기초 - 외부 JS 파일 불러오기 (0) | 2020.07.23 |
댓글