Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript DOM

JavaScript DOM Content

Written by Published

textContent and innerHTML read and change what is inside an element.

textContent treats everything as plain text.

innerHTML treats it as markup, which is powerful but needs care.

Example

Example

javascript

document.body.innerHTML = '<p id="demo">Old</p>';

document.getElementById("demo").textContent = "New";

console.log(document.getElementById("demo").textContent);

The output is New.

textContent and innerHTML

textContent gets or sets the text, ignoring any tags.

innerHTML gets or sets the markup, so tags become real elements.

Use textContent unless you genuinely need to insert HTML.

Syntax

Syntax

javascript

element.textContent = "text";
element.innerHTML = "<strong>markup</strong>";

Both replace everything already inside the element.

Reading Content

Both properties read as well as write.

Example

Example

javascript

document.body.innerHTML = '<p id="demo">Hello <b>there</b></p>';

const p = document.getElementById("demo");

console.log(p.textContent);
console.log(p.innerHTML);

textContent strips the tags; innerHTML keeps them.

Inserting Markup

Set innerHTML when you want real elements created.

Example

Example

javascript

document.body.innerHTML = '<div id="box"></div>';

document.getElementById("box").innerHTML = "<strong>Bold</strong>";

console.log(document.querySelectorAll("strong").length);

A genuine strong element now exists in the tree.

Tags as Plain Text

With textContent, tags are shown rather than interpreted.

Example

Example

javascript

document.body.innerHTML = '<div id="box"></div>';

document.getElementById("box").textContent = "<strong>Bold</strong>";

console.log(document.querySelectorAll("strong").length);

The output is 0, because no element was created.

Why innerHTML Can Be Unsafe

Putting text from a visitor into innerHTML lets them inject markup.

textContent has no such problem, which is why it is the default choice.

Example

Example

javascript

document.body.innerHTML = '<div id="box"></div>';

const fromUser = "<img src=x onerror=alert(1)>";
document.getElementById("box").textContent = fromUser;

console.log(document.querySelectorAll("img").length);

Nothing was created, because the text was treated as text.

Adding Instead of Replacing

Assigning replaces everything inside.

+= appends, but it rebuilds the whole element, so it is slow in a loop.

Example

Example

javascript

document.body.innerHTML = '<ul id="list"><li>One</li></ul>';

document.getElementById("list").innerHTML += "<li>Two</li>";

console.log(document.querySelectorAll("li").length);

Building a string first and assigning once is faster.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>textContent and innerHTML</title>
</head>
<body>

  <h1>Changing Content</h1>

  <p id="text"></p>
  <div id="markup"></div>

  <script>
    document.getElementById("text").textContent = "Set as plain text";
    document.getElementById("markup").innerHTML = "<em>Set as markup</em>";
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try swapping them:

Put the markup string into textContent and see the tags appear.

Important Points

  • textContent handles plain text.
  • innerHTML handles markup and creates real elements.
  • Both replace everything already inside the element.
  • Never put untrusted text into innerHTML.
  • Building a string once is faster than += in a loop.

Conclusion

These two properties cover most of the content changes you will make.

The choice between them is really a choice about safety.

Reach for textContent first and innerHTML only when you mean it.

PreviousJavaScript DOM SelectorsNextJavaScript DOM Attributes