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

Expecting the content of someNode to have three lines, maybe with line breaks in the code, but to render as simple text in one line - ignoring line breaks as usual.

But wait, try it!

Turns out, line breaks get converted to <br>! Very unexpected… and IMO very wrong! 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.