InnerText vs. textContent!

Posted 8/13/2019

InnerText vs. textContent

There are some interesting differences between the two contestants. Most noticeable IMO that innerText triggers a re-flow, thus, whenever possible use textContent. And I found a surprising one on top:

someNode.innerText =
  `some multi
  line text
  !`;

I would expect the nodeValue of someNode to have three lines, with line breaks and to be rendered as simple text in one line - ignoring line breaks as usual.

But wait, try it!

Turns out, line breaks get converted into <br> tags! Pretty weird and unexpected. The naming innerText is certainly misleading as it creates DOM elements.

But textContent to the rescue! It behaves as expected: Line breaks? Yes. <br> tags? No! Another reason for textContent.

The final results for innerText vs textContent is 0:2 - textContent is the clear winner of this match.

Tags