← Back to JavaScript Course | Chapter 1: Basics & Syntax | Lesson 3 of 12

JS Output

Imagine having four different ways to share news with someone, writing it on their whiteboard, popping up in front of their face to tell them directly, whispering it only to people who are specifically listening, or shouting it into an intercom that only technicians hear. JavaScript has a similar set of choices for showing output, innerHTML changes what's written on the page itself, alert interrupts the user directly, document.write writes into the page during loading, and console.log speaks only to developers watching the console. Knowing which one fits a given situation is one of the first practical skills for working with JavaScript on any site, including cookiescursor.com.

In this page:

  1. Using innerHTML
  2. Using window.alert()
  3. Using document.write()
  4. Using console.log()
  5. Choosing the Right Output Method
Syntax
javascript 
console.log(value);
document.getElementById("id").innerHTML = value;
document.write(value);

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

javascript 
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()

javascript 
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()

javascript 
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()

javascript 
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

javascript 
console.log("Visible only to developers");        // for debugging
document.body.innerHTML = "<p>Visible to visitors</p>"; // for users
Live Example
Related Topics

JS Where To · JS Statements · JS Introduction · JS Syntax

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using alert() for regular output in a finished application, it interrupts the user and feels intrusive outside of debugging or urgent warnings.
  2. Using document.write() after the page has already loaded, which can wipe out the entire existing page content unexpectedly.
  3. Forgetting that console.log() output is only visible to developers, never to regular visitors, so it can't replace visible feedback.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson JS Where To Next Lesson → JS Statements

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.