docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고, Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
2026-07-05 00:10:59 +09:00
parent a397bc4720
commit 1cfd3bbb56
1495 changed files with 68534 additions and 27 deletions
@@ -0,0 +1,115 @@
+---
+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).