How to change the Text of an Element in JavaScript

# Change the Text of an Element in JavaScript

Use the textContent property to change the text of an element.

The textContent property will set the text of the element to the provided string, replacing any of the existing content.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="container">Initial Text</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const div = document.getElementById('container');

// ✅ Change (replace) the text of the element
div.textContent = 'Replacement text';

// ✅ Change (replace) the content with HTML
div.innerHTML = `<span style="background-color: lime">Replacement HTML</span>`;

// ✅ Append / Prepend text to the element
div.insertAdjacentText('beforeend', ' appended text');

// ✅ Append / Prepend HTML to the element
div.insertAdjacentHTML(
  'beforeend',
  `<span style="background-color: cyan"> appended HTML</code>`,
);

change text of div element

The code for this article is available on GitHub

We used the textContent property on the div to change its text content.

The textContent property can also be used to read the text content of an element and its descendants.

Setting textContent on an element removes all of the element's children and replaces them with a single text node with the provided string.

If you need to completely replace the HTML content of the div, use the innerHTML property.

index.js

Copied!
const div = document.getElementById('container');

// ✅ Change (replace) the text with HTML
div.innerHTML = `<span style="background-color: lime">Replacement HTML</span>`;

completely replace the html content of the div

The code for this article is available on GitHub

The innerHTML property gets or sets the HTML contained within the element.

By setting the property on the element, you effectively replace the previously contained HTML in the div.

You shouldn't use user-generated data without escaping it when setting the HTML of an element because it would leave your application vulnerable to XSS attacks.

If you need to append/prepend text to the existing content of the div element, use the insertAdjacentText method instead.

index.js

Copied!
const div = document.getElementById('container');

// ✅ Append / Prepend text to the element
div.insertAdjacentText('beforeend', ' appended text');

append or prepend text to existing content

The code for this article is available on GitHub

The insertAdjacentText() method takes the following 2 parameters:

position - the position relative to the element where the text should be inserted. Can be one of the following 4:

beforebegin - before the element itself.
afterbegin - just inside the element, before its first child.
beforeend - just inside the element, after its last child.
afterend - after the element itself.

data - the string from which to create a new text node to insert at the given position.

We inserted text just inside the div element, before its last child, but you can change the value of the position parameter depending on your use case.

If you need to insert HTML into the div, use the insertAdjacentHTML() method.

index.js

Copied!
const div = document.getElementById('container');

// ✅ Append / Prepend HTML to the element
div.insertAdjacentHTML(
  'beforeend',
  `<span style="background-color: cyan"> appended HTML</code>`,
);

The code for this article is available on GitHub

The first parameter the insertAdjacentHTML() method takes is the same as insertAdjacentText() - the position at which the HTML should be inserted.

The second parameter is an HTML string containing the content you want to insert.

Note that this method shouldn't be used with user-provided data without it being escaped, as it would leave you open to cross-site scripting attacks.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to change the Text of an Element in JavaScript

# Change the Text of an Element in JavaScript

Borislav Hadzhiev