📌 1. document.write() 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>document.write 예제</title>
<script type="text/javascript">
// 페이지 로딩 시 실행 → 문서 안에 바로 삽입
document.write("<h1>document.write() 예시</h1>");
</script>
</head>
<body>
<h3>HTML로 직접 작성한 부분</h3>
</body>
</html>
✅ 특징
- 페이지 로딩 시점에만 안전하게 사용 가능
- 로딩 이후 실행하면 기존 문서 내용을 덮어써버릴 수 있음 ⚠️
📌 2. innerHTML 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>innerHTML 예제</title>
</head>
<body>
<h3>HTML로 직접 작성한 부분</h3>
<div id="box"></div>
<script type="text/javascript">
// 특정 요소(#box)를 선택해서 안에 내용 삽입
document.getElementById("box").innerHTML = "<p style='color:blue;'>innerHTML 예시</p>";
</script>
</body>
</html>
✅ 특징
- 특정 요소 안에 동적으로 내용을 삽입할 수 있음
- 페이지 로딩 이후에도 안전하게 사용 가능 → 실무에서 주로 사용
'기초 및 언어 > ▶ JavaScript&JQuery' 카테고리의 다른 글
| 3. JavaScript_숫자변환 (1) | 2025.09.08 |
|---|---|
| 2. JavaScript_함수생성, 이벤트 속성 정리 (1) | 2025.09.08 |
| 자바스크립트 dom (0) | 2024.02.07 |
| 자바스크립트 date (0) | 2024.02.07 |
| fetch (0) | 2024.01.30 |
