JavaScript Output

Subscribe to my newsletter and never miss my upcoming articles


JavaScript can display data in different ways using:

  • console.log() Object
  • alert() Object
  • document.write() Object
  • elem.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>

Edit on Stackblitz


alert()

The alert() object is used to display data on the window browser. 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>

Edit on Stackblitz


image.png


document.write()

You can also test unexpected results directly in the browser window with the command document.write(). You can also use HTML elements within the object. 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>

Edit on Stackblitz


innerHTML

You can also 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>

Edit on Stackblitz

Outside of the console, but in the window browser, you can prepend the window object to any function, variable, or property. For example, prepend the window object to the alert function or to the document property like window.alert('...'), window.document.write('...'), window.document.querySelector('#demo') = "...".


Buy me a Coffee


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.

No Comments Yet