JavaScript

How to Print in JavaScript | Explained with Examples

Like any other computing language, JavaScript provides a variety of ways to print output. As a JavaScript learner, you have come across the console.log() method for printing the output. However, the inner.HTML property, window.alert() method, and document.write() methods can also be used for printing purposes in JavaScript.

In our today’s guide, we will provide a deep insight into all the possible approaches to print in JavaScript.

Let’s dig into these methods one by one.

Method 1: console.log() Method

The console.log() method is the most used way to print in JavaScript. It can be used to print the strings, objects, or any other output on the console. The JavaScript code will work on the console; therefore, the console.log() method cannot be used to run any HTML or CSS integration with the JS.

The syntax of this method is described below:

Syntax

console.log(message);

The following example is carried out to print a message in JavaScript based on the console.log() method.

Code

console.log("An example to use console.log() in JavaScript")

console.log("Welcome to JavaScript");

In this code, the console.log() method is employed to print a message in the console window.

Output

The output shows that two statements that were used with the console.log() method are printed on the console.

Method 2: document.write() Method

The document.write() is another approach used to print output in a browser using JavaScript. For instance, the method is utilized to add content to the HTML page. The developer community utilizes this method for testing or debugging purposes. The syntax of the document.write() method is described below:

Syntax

document.write(message);

The message parameter passed to this method will be printed on the console.

For better understanding of this method, let’s have a look at the following example code:

Code

<html>

<body>

<h2>An example of using document.write() in JavaScript </h2>

<script>

document.write("Welcome to JavaScript");

</script>

</body>

</html>

In the above code, the document.write() method is used inside the <script> tags.

Output

The output shows that the “Welcome to JavaScript” text is printed on the browser.

Method 3: inner.HTML Property

The inner.HTML property is famous for printing a message in an HTML document. In the method, the unique identification of the element is passed to get the HTML element in the document.

Syntax

document.getElementById("p").innerHTML = "message";

The description of the parameters is given below:

  • getElementById: identify the unique id of the HTML element.
  • message: represents the specific information to be printed in JavaScript.

The example code for the innerHTML property is provided below.

Code

<html>

<body>

<h2>An example to use innerHTML in JavaScript </h2>

<p id="p"></p>

<script>

document.getElementById("p").innerHTML = "Welcome to JavaScript";

</script>

</body>

</html>

The description of the code is as follows.

  • A general message is displayed by using the heading <h2> tags.
  • After that, a unique identification “p” is assigned to the paragraph element.
  • Furthermore, the string “Welcome to JavaScript” is assigned using the innerHTML property.

Output

The output displays the message “Welcome to JavaScript” by employing the innerHTML property in JavaScript.

Method 4: window.alert() Method

Another approach to printing a message is possible through the window.alert() method. It is useful for form validation and confirmation of any user action in the browser. The syntax of the window.alert() method is as follows:

Syntax

window.alert("message");

The message argument will be displayed as an alert message.

Example

An example is utilized to pop up the window by the window.alert() method in JavaScript.

Code

<html>

<body>

<h2>An example to use window.alert() in JavaScript</h2>

<script>

window.alert("Welcome to JavaScript");

</script>

</body>

</html>

In this code:

  • A message is displayed using the heading <h2> tag.
  • After that, the alert() method is employed within the <script> tags.
  • Finally, the string “Welcome to JavaScript” is passed to the alert() method.

Output

The output of the above code execution represents a pop-up window. In this window, the passing string “Welcome to JavaScript” is printed as an alert to the user.

Bonus Tip: Other Console Methods to Print in JavaScript

Apart from the consol.log method, there are several other methods that are assisted by the console object of the JavaScript. They are used for several purposes and print on the console. The following table contains all those methods alongside their descriptions and the syntaxes:

Method Syntax Description
clear() console.clear() This method clears the console.
error() console.error() Prints an error message.
info() console.info() Prints informational messages.
warn() console.warn() Displays a warning on the console.
assert() console.assert() Error message if and only if the assertion is false.

That’s it from this guide. You have learned to print in JavaScript via various possible methods.

Conclusion

It is concluded that four different approaches named document.write(), innerHTML, window.alert, and console.log() can be employed to print information in JavaScript. The information may include strings, object properties, calculated output, etc. The console supports additional methods, including console.warn(), console.info(), console.error(). We have also demonstrated the purpose and the syntax of these methods.

About the author

Syed Minhal Abbas

I hold a master's degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.