JavaScript DOM
textContentandinnerHTMLread 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
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 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
javascript
element.textContent = "text";
element.innerHTML = "<strong>markup</strong>";Both replace everything already inside the element.
Both properties read as well as write.
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.
Set innerHTML when you want real elements created.
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.
With textContent, tags are shown rather than interpreted.
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.
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
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.
Assigning replaces everything inside.
+= appends, but it rebuilds the whole element, so it is slow in a loop.
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
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>Run the above example in the Try It Editor.
Try swapping them:
Put the markup string into textContent and see the tags appear.
textContent handles plain text.innerHTML handles markup and creates real elements.innerHTML.+= in a loop.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.