JavaScript can display data in different ways using:
-
console.log()Object -
alert()Object -
document.write()Object -
elem.innerHTMLProperty -elemis 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
To target specific elements based on their selector, the innerHTML property is used on selected elements.
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>
<h2 id="demo"></h2>
<body>
<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 Media | 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.
Top comments (0)