--- id: javascript-output title: "JavaScript Output" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["innerHTML", "document.write", "window.alert", "console.log", "JS display data"] 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", "output", "innerhtml", "console-log"] raw_sources: ["https://www.w3schools.com/js/js_output.asp"] applied_in: [] github_commit: "" --- # [[JavaScript Output]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) JavaScript can display data four ways β€” writing into an HTML element (`innerHTML`/`innerText`), HTML output via `document.write()`, an alert box via `window.alert()`, and the browser console via `console.log()`. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **Four display possibilities** β€” `innerHTML`/`innerText` (into an HTML element), `document.write()` (HTML output), `window.alert()` (alert box), `console.log()` (browser console). [S1] - **`innerHTML` is the most common** β€” accessing an element with `document.getElementById(id)` and setting `innerHTML` is the most common way to display data in HTML. [S1] - **`innerHTML` vs `innerText`** β€” use `innerHTML` when you want to change an HTML element; use `innerText` when you only want to change the plain text. [S1] - **`document.write()` is for testing only** β€” using it after the document has loaded will delete all existing HTML. [S1] - **`console.log()` is for debugging.** [S1] - **No print object** β€” JavaScript has no print object/method; the only exception is `window.print()` to print the current window. [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **Select-then-write pattern** β€” `document.getElementById("demo").innerHTML = ...` is the standard way to inject results into the page. [S1] - **Testing vs production output** β€” `document.write()` and `alert()` are quick test outputs; `console.log()` is the debugging channel; `innerHTML`/`innerText` are the production display. [S1] - **Optional `window` prefix** β€” `window.alert()` and `alert()` are equivalent because `window` is the global scope object. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) **JavaScript Display Possibilities** β€” JavaScript can "display" data in four ways: writing into an HTML element using `innerHTML` or `innerText`, writing into the HTML output using `document.write()`, writing into an alert box using `window.alert()`, and writing into the browser console using `console.log()`. [S1] **Using innerHTML** β€” To access an HTML element, use the `document.getElementById(id)` method, then use the `innerHTML` property to change the HTML content. Changing the `innerHTML` property is the most common way to display data in HTML. [S1] ```html

My First Web Page

My First Paragraph

``` **Using innerText** β€” Use the `innerText` property to change the plain text content of an HTML element. Use `innerHTML` when you want to change an HTML element; use `innerText` when you only want to change the plain text. [S1] ```html

My First Web Page

My First Paragraph

``` **Using document.write()** β€” For testing purposes, it is convenient to use `document.write()`. Using `document.write()` after an HTML document is loaded will delete all existing HTML; the method should only be used for testing. [S1] ```html

My First Web Page

My first paragraph.

``` ```html

My First Web Page

My first paragraph.

``` **Using window.alert()** β€” You can use an alert box to display data. The `window` keyword is optional because `window` is the global scope object. [S1] ```html

My First Web Page

My first paragraph.

``` ```html

My First Web Page

My first paragraph.

``` **Using console.log()** β€” For debugging purposes, you can use the `console.log()` method to display data in the browser console. [S1] ```html ``` **JavaScript Print** β€” JavaScript does not have any print object or print methods. You cannot access output devices from JavaScript. The only exception is that you can call the `window.print()` method in the browser to print the content of the current window. [S1] ```html ``` ## πŸ› οΈ 적용 사둀 (Applied in summary) The page's own snippets are the canonical applied examples β€” injecting markup with `innerHTML`, plain text with `innerText`, test output with `document.write()`/`alert()`, debug output with `console.log()`, and `window.print()` on a button. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Display into an element: ```javascript document.getElementById("demo").innerHTML = "

Hello World

"; ``` Debug to console: ```javascript console.log(5 + 6); ``` Alert box: ```javascript window.alert(5 + 6); ``` ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) No contradictions found in the source. (The source itself cautions that `document.write()` after load deletes existing HTML β€” a caveat, not a contradiction.) ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual (μ‹€μ œ 적용 사둀 발견 μ‹œ applied/validated둜 승격 κ°€λŠ₯) - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.89 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[JavaScript Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[JavaScript Introduction]], [[JavaScript Where To]], [[JavaScript Statements]] - **μ°Έμ‘° λ§₯락:** Referenced whenever results need to be shown to a user or developer. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” JavaScript Output β€” https://www.w3schools.com/js/js_output.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Output" page (Astra wiki-curation, P-Reinforce v3.1 format).