JavaScript Output |

JavaScript provides a number of properties and strategies to supply info to your customers, be it variable values, messages, and even dynamic content material. This JavaScript tutorial will show the right way to serve up all of those, full with working code examples.

Are you seeking to be taught JavaScript internet improvement in a web based course setting? We now have an inventory of the Greatest On-line Programs to Be taught JavaScript to assist get you began.

JavaScript Output Strategies and Properties

There are a complete of six methods to show textual content and/or content material with JavaScript, relying on the place you wish to write it to; the primary three are properties, whereas the opposite three are strategies:

  • The innerHTML, innerText and textContent properties written into an HTML factor.
  • The doc.write() methodology writes instantly into the HTML output.
  • The window.alert() methodology shows an alert field, appropriate for displaying error messages and the like.
  • The console.log() methodology writes to the browser console, making it superb for displaying debugging info.

The remainder of this programming tutorial will delve into every of those strategies and properties.

The innerHTML, innerText and textContent JavaScript Properties

These three associated properties of the Node and Factor object are all editable so that you could make the most of them to get and set their HTML and/or textual content. Here’s a temporary description of what every property does:

  • The innerHTML property returns and units the textual content content material of the factor, together with all spacing and inside HTML tags.
  • The innerText property returns and units the textual content content material of the factor and all its kids, with out CSS hidden textual content spacing and tags, besides <script> and <fashion> parts.
  • The textContent property returns and units the textual content content material of the factor and all descendants, with spacing and CSS hidden textual content, however with out tags.

Programmers cannot entry any of the above properties with out first acquiring a reference to a doc factor or node. These two objects are related, however not precisely the identical factor. A node is a part of the Doc Object Mannequin (DOM) and describes each object within the doc, from the foundation HTML tag to feedback and textual content. In the meantime, a component is a node of a particular sort — Node.ELEMENT_NODE. For the needs of this tutorial, we are going to get hold of a reference to doc parts utilizing the doc.getElementById() methodology, as follows:

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

After you have received a component (or node), you’re able to set its textual content and/or content material.

Utilizing the JavaScript innerHTML Property

The innerHTML property is the one one which helps HTML tags, making it the right selection for setting a component’s HTML content material.

Here’s a pattern string that comprises some additional whitespace and a nested SPAN factor:

const content material="This factor has additional spacing     and comprises <span>a span factor</span>";

Assigning it to the paragraph’s innerHTML property will instantly replace its content material:

p.innerHTML = content material;


JavaScript InnerHTML example

We will see that the SPAN factor was rendered as a toddler factor as a result of the span CSS fashion was utilized:

span {
  background-color: lightblue;

Learn: High Collaboration Instruments for Internet Builders

Utilizing the JavaScript innerText Property

The innerText property can solely set a component’s textual content content material, so passing it a string that comprises HTML tags will render them as a string:

p.innerText = content material;


JavaScript innerText tutorial

Utilizing the JavaScript textContent Property

As we are able to see beneath, the output produced by the textContent property is strictly the identical as that of innerText:


JavaScript textContent tutorial

It differs from innerText in the way it returns a component’s textual content, and never in setting it. For that purpose, it’s virtually by no means utilized to set content material.

Utilizing the doc.write() Methodology

The doc.write() methodology writes a string of textual content to a doc stream opened by It was once a technique to produce dynamic content material on the consumer aspect, however, since newer DOM strategies and properties (like these above) have been launched, doc.write() has been relegated to a fast and soiled technique of verifying variables and such. Additionally, as a result of doc.write() writes to the doc stream, calling it after the doc has been loaded overwrites the entire current doc content material!

Content material delivered by doc.write() is handled precisely the identical method by the browser as static HTML content material as a result of each are served through the doc stream. As such, This JavaScript code would produce a paragraph that’s indistinguishable from static HTML markup:

const demoMarkup = `
<p id="testParagraph">
  That is the check <p> factor


Utilizing the window.alert() Methodology

The window.alert() methodology provides a handy technique to show a modal popup to the consumer with a view to relay an vital message. The message’s significance is emphasised by the truth that the popup window opens within the heart of the browser viewport and prevents any web page interactions till the consumer dismisses the popup by clicking the OK button.

alert(content material);

Though it solely accepts textual content as an argument, alert() does faithfully retain whitespace.


JavaScript windowAlert tutorial

Additionally word that the “window.” namespace isn’t required because the window object is the worldwide scope object.

Utilizing the console.log() Methodology

Right here is a technique that’s solely actually used for debugging functions, because it writes its output to the developer instruments console. Not like the earlier strategies we now have checked out right here as we speak, console.log() accepts a variable variety of arguments and can gladly take any knowledge sort you throw at it, together with numbers, objects, and even customized lessons.

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

JavaScript tutorial

Ultimate Ideas on JavaScript Output

This tutorial offered just a few methods to supply info to your customers, be it variable values, messages, and even dynamic content material. To view the working examples, take a look at the codepen demo.

Learn extra JavaScript internet improvement tutorials and ideas.


Leave a Reply

Your email address will not be published.