How to Display the JavaScript variable in HTML page

In this tutorial, we are going to learn about how to display the JavaScript variable in HTML page.

Consider, we have a following JavaScript variable in our code:

const name = "sai";

To display the JavaScript variable in a HTML page, first we need to access the html element using the document.getElementById() method then assign a variable to the element using the innerHTML property.

Here is an example:

<p id="name"></p>

JavaScript:

const name = "sai";

const element = document.getElementById("name");
element.innertHtml = name;

Output:

<p id="name">Sai</p>

Similarly, we can display a “js” variable in HTML webpage by creating the dom node using the JavaScript and render it inside the html body.

Here is an example:

const name = "sai";
const el = document.createElement('p'); // creates p html element
el.innerHTML = name; // adding name variable to p element

document.body.appendChild(el); // appending to body

In the example above, first we created a html p element using the document.createElement() then added a name variable inside the p element at last we rendered the p element inside the html body.