Tutorial

❮ Previous Next ❯

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().

Using innerHTML

The innerHTML is a property of the Element that allows you to get or set the HTML markup contained within the element.

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:

EXAMPLE ❯


                                <!DOCTYPE html><br />
<html><br />
<body><br />
<br />
<h1>My First Web Page</h1><br />
<p>My First Paragraph</p><br />
<br />
<p id="demo"></p><br />
<br />
<script><br />
document.getElementById("demo").innerHTML = 5 + 6;<br />
</script><br />
<br />
</body><br />
</html>

Using document.write()

The write() method in HTML is used to write some content or JavaScript code in a Document. This method is mostly used for testing purpose. It is used to delete all the content from the HTML document and inserts the new content. It is also used to give the additional text to an output which is open by the document.

EXAMPLE ❯


                                <!DOCTYPE html><br />
<html><br />
<body><br />
<br />
<h1>My First Web Page</h1><br />
<p>My first paragraph.</p><br />
<br />
<script><br />
document.write(5 + 6);<br />
</script><br />
<br />
</body><br />
</html>

Using window.alert()

The alert() method displays an alert box with a specified message and an OK button. An alert box is often used if you want to make sure information comes.

An alert box is often used if you want to make sure information comes through to the user.

When an alert box pops up, the user will have to click "OK" to proceed.

EXAMPLE ❯


                                <!DOCTYPE html><br />
<html><br />
<body><br />
<br />
<h1>My First Web Page</h1><br />
<p>My first paragraph.</p><br />
<br />
<script><br />
window.alert("This is js example");<br />
</script><br />
<br />
</body><br />
</html>

Using console.log()

The console.log() is a function in JavaScript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user.

EXAMPLE ❯


                                <!DOCTYPE html><br />
<html><br />
<body><br />
<p>F12 on your keybord will activate debugging.</p><br />
<script><br />
console.log("This is javascript demo");<br />
</script><br />
<br />
</body><br />
</html>

JavaScript Print

JavaScript does not have any print object or print methods.

You cannot access output devices from JavaScript.

The only exception is that you can call the window.print() method in the browser to print the content of the current window.

EXAMPLE ❯


                                <!DOCTYPE html><br />
<html><br />
<body><br />
<br />
<button onclick="window.print()">Print this page</button><br />
<br />
</body><br />
</html>

❮ Previous Next ❯