JavaScript Display Possibilities
JavaScript can “display” data in different ways:
- Writing into an HTML element, using
innerHTMLorinnerText. - Writing into the HTML output using
document.write(). - Writing into an alert box, using
window.alert(). - Writing into the browser console, using
console.log().
InnerHTML
- To access an HTML element, you can use the
document.getElementById(id)method. - Use the
idattribute to identify the HTML element. - Then use the
innerHTMLproperty to change the HTML content of the HTML element
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = “<h2>Hello World</h2>”;
</script>
</body>
</html>
Output
InnerText
- To access an HTML element, use the
document.getElementById(id)method. - Then use the
innerTextproperty to change the inner text of the HTML element
<!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>
Output
Document.write()
For testing purposes, it is convenient to use document.write()
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Output
window.alert()
You can use an alert box to display data
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Output
console.log()
For debugging purposes, you can call the console.log() method in the browser to display data.
<!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>
<p>Then click Run again.</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.
Then click Run again.
Description :
JavaScript provides several ways to display data to users or developers. These display methods are used to show messages, update content on web pages, or assist with debugging during development.
- innerHTML
- document. write ()
- window. alert ()
- console.log()
Each method serves a different purpose some are better for user interaction, while others are more useful for developers behind the scenes.
