2nd/10_Wiki/Topic_JavaScript/JavaScript_DOM_HTML.md

---
id: javascript-dom-changing-html
title: "JavaScript DOM Changing HTML"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["innerHTML", "changing HTML content", "changing attributes", "document.write", "dynamic HTML content"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["javascript", "js", "web", "frontend", "w3schools", "dom"]
raw_sources: ["https://www.w3schools.com/js/js_htmldom_html.asp"]
applied_in: []
github_commit: ""
---

# [[JavaScript DOM Changing HTML]]

## 🎯 한 줄 통찰 (One-line insight)
The HTML DOM lets JavaScript change the content of an element via `innerHTML` and change its attributes by assigning new values directly. [S1]

## 🧠 핵심 개념 (Core concepts)
- **innerHTML changes content** — the easiest way to modify the content of an HTML element is with the `innerHTML` property. [S1]
- **Assign to change attributes** — to change the value of an HTML attribute, assign a new value to the element's attribute property (e.g. `element.src = ...`). [S1]
- **Dynamic content** — JavaScript can create HTML content dynamically, for example inserting the current date/time with `Date()`. [S1]
- **document.write() is for generation, not editing** — it writes directly to the HTML output stream and must not be used after the document has loaded. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **`document.getElementById(id).innerHTML = new HTML`** — the canonical content-change syntax. [S1]
- **`element.attribute = new value`** — the canonical attribute-change syntax. [S1]
- **Guard against missing elements** — access DOM elements only after they exist. [S1]

## 📖 세부 내용 (Details)
**Changing HTML Content** [S1]
The easiest way to modify the content of an HTML element is by using the `innerHTML` property. [S1]

**The innerHTML Property** [S1]
The syntax for changing the content of an HTML element is: [S1]
```javascript
document.getElementById(id).innerHTML = new HTML
```
Change a paragraph's content: [S1]
```javascript
document.getElementById("p1").innerHTML = "New text!";
```
Change a heading's content: [S1]
```javascript
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
```

**Common Mistakes** [S1]
- Trying to access a DOM element before it exists. [S1]
- Forgetting the quotes in an id like `"demo"`. [S1]

**Changing an Attribute** [S1]
To change the value of an HTML attribute, assign a new value to the attribute property — for example changing the `src` of an image: [S1]
```javascript
document.getElementById("myImage").src = "landscape.jpg";
```

**Dynamic HTML content** [S1]
JavaScript can create dynamic HTML content, such as writing the current date and time with `Date()`. [S1]

**document.write()** [S1]
The `document.write()` method writes directly to the HTML output stream: [S1]
```javascript
document.write(Date());
```

**Warning!** [S1]
> Never use `document.write()` after the document is loaded. It will overwrite the document. [S1]

## 🛠️ 적용 사례 (Applied in summary)
The page's snippets — setting `#p1.innerHTML`, updating an `<h1>` via `innerHTML`, swapping an image `src`, and `document.write(Date())` — are the canonical applied examples. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Change content (language: JavaScript):
```javascript
document.getElementById("p1").innerHTML = "New text!";
```
Change an attribute:
```javascript
document.getElementById("myImage").src = "landscape.jpg";
```
Write dynamic output (use only before the document finishes loading):
```javascript
document.write(Date());
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. (The source explicitly warns against post-load use of `document.write()`, which is a caveat rather than a contradiction.) [S1]

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.89
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[JavaScript Tutorial]]
- **관련 개념:** [[JavaScript DOM Elements]], [[JavaScript DOM Changing CSS]], [[JavaScript HTML DOM]], [[JavaScript DOM Methods]]
- **참조 맥락:** The content/attribute mutation step that follows selecting an element.

## 📚 출처 (Sources)
- [S1] W3Schools — JavaScript DOM Changing HTML — https://www.w3schools.com/js/js_htmldom_html.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript DOM Changing HTML" page (Astra wiki-curation, P-Reinforce v3.1 format).