How to Change the Text of a Div Using JavaScript

To change the text displayed by a div, select it and assign a string to its textContent property. This treats the string as text, even if it contains characters such as < or >.

Change a div’s text with textContent

In a browser page, place the script after the element or run it after the document has loaded. The selector must match the intended div.

<div id="message">Welcome</div>
<script>
  const message = document.querySelector("#message");
  message.textContent = "Hello, world!";
</script>

The browser example above updates the actual page. For a small JavaScript example of the property assignment and displayed value, run:

const div = { textContent: "" };
div.textContent = "Hello, world!";
console.log(div.textContent);

Hello, world!

This runnable example uses a plain object to show the property assignment and output; the HTML example demonstrates updating an actual page. Assigning to textContent replaces the element’s child nodes with a text node containing the new string. Use it when the goal is plain text, especially when the value comes from a user or another untrusted source.

Choose between textContent and innerHTML

Use textContent for text. innerHTML parses its assigned string as HTML and replaces the element’s children with the resulting nodes, so choose it only when you intend to insert markup. Inserting untrusted data into an HTML-parsing context can create cross-site scripting risk; parsing markup does not mean every string automatically runs as code.

For example, assigning the string <strong>Hi</strong> to textContent displays those characters literally. Assigning it to innerHTML creates a strong element, so the browser displays “Hi” in bold. If markup is required, keep it separate from untrusted values and use an appropriate safe rendering approach.

Use other JavaScript methods to update text

innerText gets or sets rendered text and can reflect styling and layout, so use it when that rendered-text behavior matters. For a straightforward text replacement, textContent is generally clearer.

You can create a text node with createTextNode and replace existing children with that node when building DOM content in steps. Template literals, written with backticks, help compose dynamic strings; assigning the resulting string to textContent still treats it as text. If your page already loads jQuery, $("#message").text("Hello, world!") sets the selected element’s text. Without jQuery, use the browser’s DOM APIs shown above.

Use CSS generated content for decorative text

CSS ::before and ::after pseudo-elements can add visual decoration, such as a small label beside an element. Generated content is not a JavaScript update to the div’s DOM text, and it is unsuitable for essential information or interactive content. Some replaced elements, including img, do not display generated content in the same way as ordinary elements. Use textContent when the text needs to be part of the page’s actual content.