This blog post suggests that textContent
is preferable to innerText
for avoiding layout thrashing. But it is focused on retrieving an element's text; for setting element text, the opposite appears to be true -- at least in the following example.
This example uses innerText
and produces no layout thrashing:
<style>
#test {
background-color: blue;
float: right;
width: 100px;
height: 100%;
}
</style>
Test test test
<div id="test"></div>
<script>
setInterval(function() {
document.querySelector('#test').innerText = 'innerText';
}, 100);
</script>
But replace innerText
with textContent
and watch it thrash:
Can someone explain this behavior? What can I do to avoid layout thrashing and still change an element's text in a standards-based way?
innerText
: it's non-standard and varies significantly in implementation, and is not even implemented in Firefox. What happens if you just append a text node?var textNode = document.createTextNode("innerText"); document.getElementById("test").appendChild(textNode)