LanguagesJavaScriptJavaScript Output

JavaScript Output

JavaScript offers several properties and methods to provide information to your users, be it variable values, messages, and even dynamic content. This JavaScript tutorial will demonstrate how to serve up all of these, complete with working code examples.

Are you looking to learn JavaScript web development in an online course setting? We have a list of the Best Online Courses to Learn JavaScript to help get you started.

JavaScript Output Methods and Properties

There are a total of six ways to display text and/or content with JavaScript, depending on where you want to write it to; the first three are properties, while the other three are methods:

  • The innerHTML, innerText and textContent properties written into an HTML element.
  • The document.write() method writes directly into the HTML output.
  • The window.alert() method displays an alert box, suitable for displaying error messages and the like.
  • The console.log() method writes to the browser console, making it ideal for displaying debugging information.

The rest of this programming tutorial will delve into each of these methods and properties.

The innerHTML, innerText and textContent JavaScript Properties

These three related properties of the Node and Element object are all editable so that you can utilize them to get and set their HTML and/or text. Here is a brief description of what each property does:

  • The innerHTML property returns and sets the text content of the element, including all spacing and inner HTML tags.
  • The innerText property returns and sets the text content of the element and all its children, without CSS hidden text spacing and tags, except <script> and <style> elements.
  • The textContent property returns and sets the text content of the element and all descendants, with spacing and CSS hidden text, but without tags.

Programmers can not access any of the above properties without first obtaining a reference to a document element or node. These two objects are similar, but not exactly the same thing. A node is part of the Document Object Model (DOM) and describes every object in the document, from the root HTML tag to comments and text. Meanwhile, an element is a node of a specific type — Node.ELEMENT_NODE. For the purposes of this tutorial, we will obtain a reference to document elements using the document.getElementById() method, as follows:

let p = document.getElementById("testParagraph");

Once you have got an element (or node), you are ready to set its text and/or content.

Using the JavaScript innerHTML Property

The innerHTML property is the only one that supports HTML tags, making it the perfect choice for setting an element’s HTML content.

Here is a sample string that contains some extra whitespace and a nested SPAN element:

const content = 'This element has extra spacing     and contains <span>a span element</span>';

Assigning it to the paragraph’s innerHTML property will immediately update its content:

p.innerHTML = content;

 

JavaScript InnerHTML example

We can see that the SPAN element was rendered as a child element because the span CSS style was applied:

span {
  background-color: lightblue;
}

Read: Top Collaboration Tools for Web Developers

Using the JavaScript innerText Property

The innerText property can only set an element’s text content, so passing it a string that contains HTML tags will render them as a string:

p.innerText = content;

 

JavaScript innerText tutorial

Using the JavaScript textContent Property

As we can see below, the output produced by the textContent property is exactly the same as that of innerText:

 

JavaScript textContent tutorial

It differs from innerText in how it returns an element’s text, and not in setting it. For that reason, it is practically never utilized to set content.

Using the document.write() Method

The document.write() method writes a string of text to a document stream opened by document.open(). It used to be a way to produce dynamic content on the client side, but, since newer DOM methods and properties (like those above) were introduced, document.write() has been relegated to a quick and dirty means of verifying variables and such. Also, because document.write() writes to the document stream, calling it after the document has been loaded overwrites all of the existing document content!

Content delivered by document.write() is treated exactly the same way by the browser as static HTML content because both are served via the document stream. As such, This JavaScript code would produce a paragraph that is indistinguishable from static HTML markup:

const demoMarkup = `
<p id="testParagraph">
  This is the test <p> element
</p>`;

document.write(demoMarkup);

Using the window.alert() Method

The window.alert() method offers a convenient way to display a modal popup to the user in order to relay an important message. The message’s importance is emphasized by the fact that the popup window opens in the center of the browser viewport and prevents any page interactions until the user dismisses the popup by clicking the OK button.

alert(content);

Although it only accepts text as an argument, alert() does faithfully retain whitespace.

 

JavaScript windowAlert tutorial

Also note that the “window.” namespace is not required as the window object is the global scope object.

Using the console.log() Method

Here is a method that is only really used for debugging purposes, as it writes its output to the developer tools console. Unlike the previous methods we have looked at here today, console.log() accepts a variable number of arguments and will gladly take any data type you throw at it, including numbers, objects, and even custom classes.

console.log('content = "', content, '"');

JavaScript tutorial

Final Thoughts on JavaScript Output

This tutorial presented a few ways to provide information to your users, be it variable values, messages, and even dynamic content. To view the working examples, check out the codepen demo.

Read more JavaScript web development tutorials and tips.

Latest Posts

Related Stories