How to Display a JavaScript Variable in HTML Body

To display a JavaScript variable as text in a page, select an existing HTML element and assign the value to its textContent property. This updates the element in the document body; it does not open a dialog. Put the script after the target element, or arrange for it to run after the document has been parsed.

Display a JavaScript variable in the HTML body with textContent

The example below places the variable in a paragraph. Because the inline script follows that paragraph, document.getElementById("greeting") can find the element when the assignment runs. Change name to the value you want to show. The browser then renders “Hello, Robert!” as ordinary text in the page.

Run this example:

const output = { textContent: "" };
const document = {
  getElementById(id) {
    return id === "greeting" ? output : null;
  }
};
const name = "Robert";
document.getElementById("greeting").textContent = `Hello, ${name}!`;
console.log(output.textContent);

Hello, Robert!

This small runnable example uses a minimal stand-in for an element so the assignment can run in a JavaScript runtime. In a browser, use the actual DOM element as shown here:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Greeting</title>
</head>
<body>
  <p id="greeting"></p>
  <script>
    const name = "Robert";
    document.getElementById("greeting").textContent = `Hello, ${name}!`;
  </script>
</body>
</html>

For plain text, textContent is the clearest choice. It replaces the selected element’s child content with text, so markup-like characters in a variable are displayed rather than parsed as HTML. If the selector returns no element, the page structure or script timing needs attention: make sure the ID matches and that the target exists before the assignment runs. A classic external script in the document head can use defer to run after the document has been parsed. defer does not delay a classic inline script; if an inline script is in the head, wait until the target element exists, for example by listening for DOMContentLoaded, or place the script after the element as in the example above.

Use innerHTML only when inserting trusted HTML

innerHTML parses its assigned value as markup and replaces the element’s child nodes. That behavior is useful when the intended value is HTML that you control, such as a deliberately constructed emphasis element. For a name, message, or other plain-text variable, keep using textContent; treating external or user-provided text as markup can create a cross-site scripting vulnerability.

For example, assigning "<strong>Hello</strong>" to textContent displays the angle brackets and tag as text. Assigning that same string to innerHTML creates a bold Hello element. Choose based on whether the value is meant to be text or trusted markup, and avoid building HTML by concatenating untrusted values.

Why document.write() and window.alert() are not equivalent to body text output

document.write() is a method that writes into the document stream while the browser is parsing the page. It may appear to work in a parser-time example, but it is not a suitable way to update an existing element. Calling it after a document has loaded can replace the document, so use DOM methods such as textContent for ordinary page updates.

window.alert() is also a method, but it displays a temporary dialog that the reader must dismiss. Its value is not inserted into the page’s HTML body, and the dialog interrupts interaction while open. Use it only when a dialog is specifically appropriate; use textContent when the goal is to leave a value visible in the page.