It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

JavaScript Console Log Method: Master Console.log Quickly

Reading time 4 min
Published Jan 4, 2016
Updated Oct 2, 2019

This tutorial on JavaScript console log will teach you different ways of outputting data, such as window.alert(), document.write(), innerHTML, console.log(), and others. Although JavaScript's primary function is modifying the behavior of the browser, these output techniques are widely used to display certain data.

Also, you'll find out why there is more than one method to print in JavaScript, where and when to use each one of them. Multiple options are helpful when you run into problems in your code. Understanding this will help you debug or rewrite your script more conveniently.

JavaScript Output: Main Tips

  • There are several methods to make JavaScript output data. They either modify or replace existing HTML, help to debug, or retrieve HTML content.
  • You can write into an alert box with window.alert().
  • Write into the output of HTML with document.write().
  • You can write into the JavaScript console of the browser with JavaScript console log method.

Outputting Data

There is more than one way to output data in JavaScript. We will now review the three methods available and see code snippets for each one.

window.alert()

This method used to print in JavaScript displays the given data in an alert box. A small pop-up box with a closing button appears, and disappears after the button has been clicked.

Example
window.alert(12 + 3);

Tip: this window.alert method is great for short and quick informative messages, which can be closed instantly.

document.write()

document.write() writes content to the HTML documents.

Warning: you have to be very careful with this JavaScript output method as it might override the content in HTML documents.

Example
document.write(12 + 3);

In the example below, document.write() will delete all existing HTML upon button click, when an HTML document is fully loaded:

Example
<button type="button" onclick="document.write(12 + 3)">Press me to display an answer</button>

Note: apply the document.write() method for testing purposes only!

console.log()

You should use the console.log() method to print to console JavaScript. The JavaScript console log function is mainly used for code debugging as it makes the JavaScript print the output to the console.

To open the browser console, right-click on the page and select Inspect, and then click Console.

Example
console.log(12 + 3);

document.write vs console.log

These methods differ in their purpose and use cases. However, the console.log method is more relevant to the modern web development for debugging and logging. The usage of document.write is being discouraged due to the fact that the method can override everything in the <header> and <body> elements.

Modifying HTML Content

There are three options for changing the content of a specified HTML elements: innerHTML, innerText or textContent.

When used for output purposes, their functionality is highly similar. However, there is a difference when they are applied to get HTML content. Take a look at the example and its explanation below:

Example
<p id="example">   This paragraph element has excess spacing   and has <span>a span element</span>    inside.</p>

<button onclick="getInnerText()">Get innerText</button>
<button onclick="getInnerHTML()">Get innerHTML</button>
<button onclick="getTextContent()">Get textContent</button>

<script>
  function getInnerText() {
    alert(document.getElementById("example").innerText)
  }
  function getInnerHTML() {
    alert(document.getElementById("example").innerHTML)
  }
  function getTextContent() {
    alert(document.getElementById("example").textContent)
  }
</script>

Let's take a look at what output each of these properties will give when getting the content of the <p> element above.

  • innerText returns only the text without any of the excess spacing or the <span> tag:
    "This paragraph element has excess spacing and has a span element inside."
  • innerHTML returns the text with all of the excess spacing and the <span> tag:
    "   This paragraph element has excess spacing   and has <span>a span element<span>    inside."
  • textContent returns the text with all of the excess spacing, but without the <span> tag:
    "   This paragraph element has excess spacing   and has a span element    inside."

innerText

The example below looks for an HTML element with an id="learn" attribute. innerText property defines the content of an HTML element, so the content of an element in the HTML will be overwritten by JavaScript with the new content:

Example
document.getElementByID("learn").innerText = (12 + 3);

innerHTML

The following example searches for an HTML element with an id="learn" attribute. innerHTML property defines the HTML content. Therefore, the content of an element in the HTML will be overwritten by JavaScript with the new content:

Example
document.getElementByID("learn").innerHTML = (12 + 3);

textContent

The last example looks for HTML element with an id="learn" attribute. In this case, the textContent property defines the content of a specific node. As a result, the content of an element in the HTML will be replaced by JavaScript with the new content.

Example
document.getElementByID("learn").textContent = (12 + 3);

JavaScript Output: Summary

  • You can print in JavaScript using multiple different techniques.
  • The most common option used when debugging is the JavaScript console log method.
  • You should practice them all and learn to use them appropriately to debug your code better.