JavaScript Output
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
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:
See this 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 = 10 + 5;
</script>
</body>
</html>
Output:
My First Web Page
My First Paragraph.
Changing the innerHTML property of an HTML element
is a common way to display data in HTML.
Using document.write()
For testing purposes, it is convenient to use document.write() :
See this example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(10 + 5);
</script>
</body>
</html>
Output:
My First Web Page
My first paragraph.
Using document.write() after an HTML document is fully loaded, will delete all existing HTML :
See this example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button onclick="document.write(10 + 5)">Try it</button>
</body>
</html>
Output:
My First Web Page
My first paragraph.
Try it
The document.write() method should only be used for testing.
Using window.alert()
You can use an alert box to display data:
See this example :
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(10 + 5);
</script>
</body>
</html>
Using console.log()
For debugging purposes, you can use the console.log() method to display data.
See this example :
<!DOCTYPE html>
