JavaScript can display data in different ways using:
console.log()
Objectalert()
Objectdocument.write()
Objectelem.innerHTML
Property -elem
is an arbitrary name.
console.log()
As shown in the previous article, you can debug unexpected results from the browser in the console.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using log Object</title>
</head>
<body>
<script>
console.log('Hello World!')
</script>
</body>
</html>
alert method
The alert
is a method on the browser window
object - window.alert(...)
. It is used to display data on the browser or screen (window). It displays the result in a modal dialog box.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Using alert object</title>
</head>
<body>
<script>
alert('Hello World!')
</script>
</body>
</html>
write method
To test for unexpected results directly in the browser window, the command document.write()
is used. It allows HTML elements within the method. For example document.write("<h1>Hello World</h1>")
.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=1.0" />
<title>Using write object</title>
</head>
<body>
<script>
document.write("<h2>Hello World!</h2>");
</script>
</body>
</html>
innerHTML property
The innerHTML
property is used on selected elements to target specific elements based on their selector to allow HTML content within the element.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=1.0" />
<title>Using innerHTML</title>
</head>
<body>
<h2 id="demo"></h2>
<script>
let elem = document.querySelector("#demo");
elem.innerHTML = "Hello World!";
</script>
</body>
</html>
Outside of the console, but in the window browser, you use the alert
method on the window
object or document property — window.alert('...')
, window.document.write('...')
, window.document.querySelector('#demo') = "..."
.
TechStack | Bluehost
- Get a website with a free domain name for 1st year and a free SSL certificate.
- 1-click WordPress install and 24/7 support.
- Starting at $3.95/month.
- 30-Day Money-Back Guarantee.