innerHTML
document.getElementById(id)를 사용하여 HTML 요소에 접근할 수 있습니다.
아래처럼 innerHTML 속성을 사용하여 HTML 내용을 작성할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>h1 태그</h1>
<div>div 태그</div>
<div id="test"></div>
<script>
document.getElementById("test").innerHTML = "id가 test인 곳에 innerHTML 사용";
</script>
</body>
</html>
document.write()
document에 출력하는 문법입니다.
아래 예제와 같이 HTML 문서가 로드된 이후, document.write()를 사용하면 기존 HTML이 모두 삭제됩니다.
때문에 document.write()는 테스트용도로만 사용하는 것이 좋습니다.
<!DOCTYPE html>
<html>
<body>
<h1>h1 태그</h1>
<div>div 태그</div>
<div id="test"></div>
<button type = "button" onclick = "document.write('document.write() 사용')">TEST</button>
<script>
document.getElementById("test").innerHTML = "id가 test인 곳에 innerHTML 사용";
</script>
</body>
</html>
console.log()
주로 디버깅을 위해 쓰이며 브라우저에서 F12를 클릭하여 보면 데이터가 표시됨을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>console.log() 예제</h1>
<script>
console.log("console.log()를 사용, 디버깅 용도입니다.");
</script>
</body>
</html>
window.alert()
알림창입니다.
<!DOCTYPE html>
<html>
<body>
<h1>window.alert() 테스트</h1>
<script>
window.alert("알림");
</script>
</body>
</html>
