JavaScript

Displaying JavaScript Output

When you’re first learning JavaScript, having your code display an output is incredibly helpful.

Below are four standard output methods that require minimal HTML setup while focusing on JavaScript functionality.

1. console.log()

console.log() prints messages in your browser's Developer Console (F12 or Cmd+Option+J) and is used for general debugging to view values, objects, arrays, errors.

<!DOCTYPE html>
<html>
<body>
  <script>
 let message = 'Hello, console!';
 console.log(message); // Logs the string variable
 console.log('Sum:', 2 + 3); // Logs a string description and the result of 2+3
 console.log(['Apple', 'Banana']); // Logs an array
 console.log({ type: 'fruit', name: 'Orange'}); // Logs an object
  </script>
</body>
</html>

Output (in DevTools → Console):

Hello, console!
Sum: 5
['Apple', 'Banana']
{ type: 'fruit', name: 'Orange' }

As you can see, console.log() is quite versatile and can display numbers, strings, arrays, objects, and more.

2. alert()

The alert() function provides a very direct way to display a message to the user. It shows the output in a small pop-up window, often called a modal dialog box, right in the browser.

<!DOCTYPE html>
<html>
<body>
  <script>
    let name = 'Alice';
    alert('Welcome, ' + name + '!');
  </script>
</body>
</html>

Output: A popup saying “Welcome, Alice!”

This dialog box stops the execution of the code below alert() and requires the user to click 'OK' to dismiss it. Because it's intrusive and stops everything else, it's rarely used in production code.

3. document.write()

The document.write() method allows you to write content, including HTML, directly into the HTML document stream as the page is being loaded by the browser.

The output becomes part of the page's HTML structure itself.

<!DOCTYPE html>
<html>
<body>
  <script>
    document.write('Score: ' + (10 + 15));
  </script>
</body>
</html>

Output (on page):
Score: 25

But this method has a significant drawback. After the page finishes loading, calling document.write() again will wipe out everything and replace it with what you placed in it.

<!DOCTYPE html>
<html>
<body>
  <p>Existing content...</p>
  <script>
    document.write('Score: ' + (10 + 15));
  </script>
  <p>More content...</p>
  <button onclick="document.write('<h1>Page wiped!</h1>')">Click Me</button> 
</body>
</html>

Output (on page):

Existing content...
Score: 25
More content...

Press the button and it it will erase everything to show "Page wiped!".

Due to its destructive nature, this method is rarely used in modern web development but is still a method to display output.

4. element.innerHTML / element.textContent

A much more flexible and common way to display output directly on the web page is by modifying the content of existing HTML elements using properties like innerHTML and textContent.

First, you use JavaScript to select a specific HTML element (like a <div>, <p>, or <span>) often using its unique id. Then, you assign a string containing your desired output to one of these properties.

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>
<p>Some initial content.</p>

<!-- An empty paragraph element ready to receive output -->
<p id="output-area"></p> 

   <script>
   // 1. Select the paragraph element using its ID "output-area"
   const targetElement = document.getElementById("output-area"); 
  
   // 2. Define the HTML content we want to insert
   let message = "<h2>Update!</h2><p>This content was added by JavaScript.</p>";

   // 3. Assign the HTML string to the element's innerHTML property
   targetElement.innerHTML = message; 
   </script>

</body>
</html>

Output on page:

My Web Page
Some initial content.
Update!
This content was added by JavaScript.

Notice how the <h2> and <p> tags within the message string were interpreted by the browser and rendered as actual HTML headings and paragraphs. This is the key feature of innerHTML.

While innerHTML is great for inserting HTML structures, sometimes you just want to insert plain text. If the string you're inserting might contain characters like < or > that you don't want the browser to interpret as HTML tags, it's safer and often better to use textContent.

In the above example, if innerHTML is replaced with textContent:

  targetElement.textContent = message;

The output changes to:

My Web Page
Some initial content.
<h2>Update!</h2><p>This content was added by JavaScript.</p>

See the difference? With textContent, the HTML tags are shown as plain text characters.

In summary:

Use innerHTML when you intend to insert content that should be parsed and rendered as HTML (like adding lists, bold text, paragraphs, etc.).
Use textContent when you want to insert plain text only, and you want to ensure any special characters are displayed literally (safer for user-generated content).

No matter what method you use, always open your browser’s DevTools to inspect console messages, HTML elements, and ensure your scripts run as expected.