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>