Posted 8/13/2019
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.
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.