JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Generating Output

There are certain situations in which you may need to generate output from your JavaScript code. For example, you might want to see the value of variable, or write a message to browser console to help you debug an issue in your running JavaScript code, and so on.

In this tutorial you will learn how to generate outputs in JavaScript.

JavaScript Generating Output Possibilities

JavaScript can display data in different ways:

Using innerHTML

You can write or insert output inside an HTML element using the element's innerHTML property.

However, before writing the output first we need to select the element using a method such as getElementById().

Run code

Changing HTML content of an element using innerHTML is a common way to display data in HTML.

Using document.write()

You can use the document.write() method to write the content to the current document only while that document is being parsed.

Run code

If you use the document.write() method after the page has been loaded, it will overwrite all the existing content in that document.

Run code

Using window.alert()

You can also use alert dialog boxes to display the message or output data to the user.

An alert dialog box is created using the alert() method.

Run code

Using console.log()

You can easily outputs a message or writes data to the browser console using the console.log() method.

The console is useful for testing or debugging purposes.

Run code

To access your web browser's console, first press F12 key on the keyboard to open the developer tools, then click on the console tab.

You will learn more about debugging later in this tutorial.