To display a JavaScript variable in an HTML page, you can use the innerHTML property of an HTML element. For example, if you have a variable called “message” and an HTML element with the id “display”, you can use the following code to display the value of the “message” variable in the “display” element:

<div id="display"></div>
<script>
    var message = "Hello, World!";
    document.getElementById("display").innerHTML = message;
</script>

This will set the innerHTML of the element with id “display” to the value of the “message” variable, which will cause the text “Hello, World!” to be displayed on the page.

Alternatively, you can use template literals to insert the value of a JavaScript variable into an HTML string, then use innerHTML to set the content of an element as below:

<div id="display"></div>
<script>
    var message = "Hello, World!";
    document.getElementById("display").innerHTML = `<p>${message}</p>`;
</script>

You can also use document.createTextNode() to create a text node containing the value of the JavaScript variable, and then append it to the HTML element using appendChild() method.

<div id="display"></div>
<script>
    var message = "Hello, World!";
    var textNode = document.createTextNode(message);
    document.getElementById("display").appendChild(textNode);
</script>

Also Read:

Categorized in:

JavaScript

Tagged in:

,