DEV Community

Cover image for JavaScript Output
Bello Osagie
Bello Osagie

Posted on • Edited on

4 2

JavaScript Output


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>
Enter fullscreen mode Exit fullscreen mode

Edit on Stackblitz


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>
Enter fullscreen mode Exit fullscreen mode

Edit on Stackblitz


image.png


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>
Enter fullscreen mode Exit fullscreen mode

Edit on Stackblitz


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>
Enter fullscreen mode Exit fullscreen mode

Edit on Stackblitz

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') = "...".


Buy me a Coffee


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.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay