반응형
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>
반응형
'Front-End > JS' 카테고리의 다른 글
| JS 문자열 메서드 (0) | 2023.04.25 |
|---|---|
| JS 자료형과 타입 변환 모음 (0) | 2023.04.25 |
| JS 호이스팅과 var, let, const 차이점 (0) | 2023.04.25 |
| JS 현재 창 인쇄하기: window.print() (0) | 2023.04.25 |
| JS 작성 위치(<body>태그 가장 아래 위치하는 이유) (0) | 2023.04.25 |