JS Output
In this page:
Using innerHTML
innerHTML lets you read or replace the HTML content inside an element, making it the most common way to display dynamic output directly on a webpage.
Note: innerHTML can insert full HTML tags, not just plain text, which makes it powerful for building small pieces of markup dynamically.
Warning: Inserting untrusted user input directly with innerHTML can expose a site to cross-site scripting attacks, always sanitize such input first.
Example: Using innerHTML
document.body.innerHTML = "<h2>Hello!</h2><p>This text was added with innerHTML.</p>";Using window.alert()
alert() opens a small popup dialog with a message that pauses the entire page until the visitor clicks OK, making it useful for urgent notices but disruptive for everyday output.
Note: Reserve alert() for quick debugging while developing, real applications rarely use it for their final user experience.
Warning: alert() blocks all other JavaScript execution on the page until it is dismissed, which can freeze animations or timers unexpectedly.
Example: Using window.alert()
window.alert("This is an urgent message!");Using document.write()
document.write() writes text directly into the HTML document as it's loading, a technique that predates most modern approaches and is now considered outdated for anything beyond simple examples.
Note: document.write() is mostly seen in older tutorials, modern JavaScript almost always prefers innerHTML or DOM methods instead.
Warning: Calling document.write() after the page has finished loading erases the entire existing page content, a surprising and destructive side effect.
Example: Using document.write()
document.write("This text is written directly into the page.");Using console.log()
console.log() prints messages to the browser's developer console, a tool visible only to developers, making it the standard way to inspect values and debug code without affecting what visitors see.
Note: Open your browser's developer tools and check the Console tab to see console.log output while working through examples.
Warning: console.log statements left in production code are usually harmless but should be cleaned up, since they can clutter the console and occasionally leak internal details.
Example: Using console.log()
console.log("Check the browser console to see this message.");Choosing the Right Output Method
Picking the correct output method depends on the audience, use innerHTML for content visitors should see, alert only for something urgent that must interrupt them, console.log purely for developer debugging, and avoid document.write outside of simple learning examples.
Note: As a rule of thumb, ask who the message is really for, a visitor sees innerHTML, a developer sees console.log.
Warning: Mixing up these methods in a live application, like using alert() for routine confirmations, creates a jarring experience for visitors.
Example: Choosing the Right Output Method
console.log("Visible only to developers"); // for debugging
document.body.innerHTML = "<p>Visible to visitors</p>"; // for users- Using alert() for regular output in a finished application, it interrupts the user and feels intrusive outside of debugging or urgent warnings.
- Using document.write() after the page has already loaded, which can wipe out the entire existing page content unexpectedly.
- Forgetting that console.log() output is only visible to developers, never to regular visitors, so it can't replace visible feedback.
- innerHTML changes the actual visible content of an element on the page.
- alert() and console.log() are best for debugging and quick testing, not for regular user-facing output.
- document.write() is mostly a legacy tool and can accidentally erase a page's content if used after loading.
innerHTML, alert, document.write, and console.log are all supported by every browser in use today, from desktop to mobile.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: