Home / Tutorials / Javascript / Change Element Text

Javascript Change HTML Element Text Tutorial

In this Javascipt tutorial we learn how to return and change text, or HTML content, within an element.

We also discuss the differences between the innerText, innerHTML and textContent properties and which one we should use.

How to change an element's text content
How to change an element's innerHTML
The innerText property
Which text property should you use
Summary: Points to remember

How to change an element's text content

Javascript provides us with the textContent property that we can use to change the text inside an element.

Syntax:

 element.textContent = "new_value";

When we change the value of the property, it will completely overwrite the previous value.

Example:

<html>
<body>
  <h1>Heading 1</h1>
</body>
<script>
  // change the text content in the heading
  document.querySelector("h1").textContent = "H1";
</script>
</html>

This property will only return the text inside an element. Any HTML inside the element will be stripped before the text is returned.

Example:

<html>
<body>
  <p>
    In this paragraph we have some <strong>bolded text</strong>,
    some <em>italicized text</em> and a <a href="#">link</a>.
  </p>

  <p></p>
</body>
<script>
  const p1 = document.querySelectorAll("p")[0]; // top p
  const p2 = document.querySelectorAll("p")[1]; // bottom p

  // place the first paragraph's text
  // into the second one as demonstration
  p2.textContent = p1.textContent;
</script>
</html>

If we run the example above, we can see the formatting that’s present in the top paragraph is no longer there in the bottom paragraph.

This means we cannot use textContent to replace text with something that includes html.

Example:

<html>
<body>
  <h1>Heading 1</h1>
</body>
<script>
  // change the text content in the heading
  document.querySelector("h1").textContent = '<a href="#">Link</a>';
</script>
</html>

If we run the example above, it will print the HTML code instead of creating a link.

How to change an element's innerHTML

Javascript also provides us with the innerHTML property that we can use to change the text inside an element.

Example:

<html>
<body>
  <h1>Heading 1</h1>
</body>
<script>
  // change the text content in the heading
  document.querySelector("h1").innerHTML = "H1";
</script>
</html>

Unlike the textContent property, innerHTML will return everything exactly as it is inside the element, including HTML.

Example:

<html>
<body>
  <p>
    In this paragraph we have some <strong>bolded text</strong>,
    some <em>italicized text</em> and a <a href="#">link</a>.
  </p>

  <p></p>
</body>
<script>
  const p1 = document.querySelectorAll("p")[0]; // top p
  const p2 = document.querySelectorAll("p")[1]; // bottom p

  // place the first paragraph's text
  // into the second one as demonstration
  p2.innerHTML = p1.innerHTML;
</script>
</html>

This time the second paragraph has all its formatting and the link is still available because innerHTML brings any HTML along.

This means that we can include HTML elements when replacing text.

Example:

<html>
<body>
  <h1>Heading 1</h1>
</body>
<script>
  // change the text content in the heading
  document.querySelector("h1").innerHTML = '<a href="#">Link</a>';
</script>
</html>

In the example above, the link is generated instead of displaying the code.

The innerText property

The innerText property works the same as the textContent property but will not return any hidden elements.

Example:

<html>
<body>
  <p>
    This paragraph has a <span style="display:none">hidden span element</span>
    and a <span>visible span element</span>
  </p>
  <p></p>
  <p></p>
</body>
<script>
  const p = document.querySelectorAll("p");

  // textContent will display the hidden element
  p[1].textContent = "textContent: " + p[0].textContent;
  // innerText will not
  p[2].innerText = "innerText: " + p[0].innerText;
</script>
</html>

If we run the example above, we can see that innerText doesn’t display the hidden element.

Both innerText and textContent will display content inside <script> or <style> tags.

Example: script

<html>
<body>
  <p></p>
  <p></p>
</body>
<script>
  const p = document.querySelectorAll("p");
  const s = document.querySelector("script");

  // textContent will display it on a single line
  p[0].textContent = "textContent: " + s.textContent;
  // innerText will keep the formatting
  p[1].innerText = "innerText: " + s.innerText;
</script>
</html>

Example: style

<html>
<style>
  p {
    color: #303030
  }
</style>
<body>
  <p></p>
  <p></p>
</body>
<script>
  const p = document.querySelectorAll("p");
  const s = document.querySelector("style");

  // textContent will display it on a single line
  p[0].textContent = "textContent: " + s.textContent;
  // innerText will keep the formatting
  p[1].innerText = "innerText: " + s.innerText;
</script>
</html>

The only difference is that innerText will keep the formatting, whereas textContent will not.

Which text property should you use

It depends on your situation. If you simply want to change the text in an element, any of these properties will work.

If you want to return or change the HTML inside an element, use innerHTML.
If you want to return or change just the text inside an element, use innerText.
If you want to return or change just the text inside hidden elements, use textContent.

Summary: Points to remember

We can use the innerHTML, innerText and textContent properties to return or change text inside an element.
- The textContent property will return all text, including anything inside a hidden element.
- The innerText property will return all text, excluding anything inside a hidden element.
- The innerHTML property will return both text and any other HTML content inside the element.

HTML Element Styling

HTML Element Attributes