JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Output
JavaScript Display Possibilities
JavaScript can “display” data in various 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
To use an HTML element, JavaScript can apply the document.getElementById(id) method.
The id attribute specifies the HTML element. The innerHTML property specifies the HTML content:
Example
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = 5 + 6;
</script>
</body>
</html>
Output
My First Web Page
My First Paragraph.
Using document.write()
For testing purposes, it is best to apply the document.write():
Example
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Output
My First Web Page
My first paragraph.
Never call document.write after the document has finished loading. It will overwrite the whole document.
Using window.alert()
An alert box can be used to display data:
Example
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Output

Using console.log()
For debugging purposes, the console.log() method is called in the browser to display data.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Activate Debugging</h2>
<p>F12 on your keyboard will activate debugging.</p>
<p>Then select “Console” in the debugger menu.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Output
Activate Debugging
F12 on your keyboard will activate debugging.
Then select "Console" in the debugger menu.
JavaScript Print
JavaScript does not consist of print objects or print methods.
You can access the output devices from JavaScript.
The only exception is that the window.print() can be called a method in the browser to print the content of the current window.
Example
<!DOCTYPE html>
<html>
<body>
<h2>The window.print() Method</h2>
<p>Click the button to print the current page.</p>
<button onclick=”window.print()”>Print this page</button>
</body>
</html>
Output
The window.print() Method
Click the button to print the current page.