Tutorials Exercises Services Upgrade Get Certified Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
JavaScript Output
❮ Previous Next ❯
JavaScript Display Possibilities
JavaScript can "display" data in different ways:
Writing into an HTML element, using innerHTML or innerText .
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 access an HTML element, you can use the document.getElementById(id) method.
Use the id attribute to identify the HTML element.
Then use the innerHTML property to change the HTML content of the HTML element:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "<h2>Hello World</h2>";
</script>
</body>
</html>
Try it Yourself »
Tutorials Exercises Services Upgrade Get Certified Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
Note
Changing the innerHTML property of an HTML element is the most common way to display data in HTML.
Using innerText
To access an HTML element, use the document.getElementById(id) method.
Then use the innerText property to change the inner text of the HTML element:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerText = "Hello World";
</script>
</body>
</html>
Try it Yourself »
Note
Use innerHTML when you want to change an HTML element.
Use innerText when you only want to change the plain text.
Using
document.write()
Tutorials Exercises Services Upgrade Get Certified Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
For testing purposes, it is convenient to use document.write() :
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Try it Yourself »
Using document.write() after an HTML document is loaded, will delete all existing HTML:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
Try it Yourself »
The document.write() method should only be used for testing.
Tutorials Exercises Services Upgrade Get Certified Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
Using window.alert()
You can use an alert box to display data:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Try it Yourself »
You can skip the window keyword.
In JavaScript, the window object is the global scope object. This means that variables, properties, and methods by
default belong to the window object. This also means that specifying the window keyword is optional:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>Tutorials Exercises Services Upgrade Get Certified Sign In
</html>
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
Try it Yourself »
Using console.log()
For debugging purposes, you can call the console.log() method in the browser to display data.
You will learn more about debugging in a later chapter.
Example
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Try it Yourself »
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>
html>
Tutorials Exercises Services Upgrade Get Certified Sign In
<body>
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
<button onclick="window.print()">Print this page</button>
</body>
</html>
Try it Yourself »
?
Exercise
What is NOT a correct syntax for writing output in JavaScript?
window.alert()
console.log()
body.html()
document.write()
Submit Answer »
Video: JavaScript Output
Tutorials Exercises Services Upgrade Get Certified Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
❮ Previous Next ❯
Track your progress - it's free! Sign Up Log in
COLOR PICKER
Tutorials Exercises Services Upgrade Get Certified Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTST
PLUS SPACES GET CERTIFIED
FOR TEACHERS FOR BUSINESS CONTACT US
Top Tutorials Top References
HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
FORUM ABOUT ACADEMY
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.
