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.
Contents
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.
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.
In the example below, document.write() will delete all existing HTML upon button click, when an HTML document is fully loaded:
<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.
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:
<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.
innerTextreturns 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."
innerHTMLreturns 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."
textContentreturns 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:
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:
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.
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.