createTextNode vs innerHTML vs textContent

Tutorial
Browser: Document, Events, Interfaces
Document
Modifying the document

back to the lesson

createTextNode vs innerHTML vs textContent

importance: 5

We have an empty DOM element elem and a string text.

Which of these 3 commands will do exactly the same?

elem.append(document.createTextNode(text))
elem.innerHTML = text
elem.textContent = text

Answer: 1 and 3.

Both commands result in adding the text "as text" into the elem.

Here’s an example:

<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<script>
 let text = '<b>text</b>';
 elem1.append(document.createTextNode(text));
 elem2.innerHTML = text;
 elem3.textContent = text;
</script>