Run results for: textContent vs nodeValue vs data vs innerHTML vs append

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser: Firefox 134

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

node.data

1.6M/s

node.textContent

1.5M/s

node.nodeValue

1.5M/s

element.textContent

258K/s

element.innerHtml

256K/s

append

211K/s

View exact numbers

HTML Preparation code:

<div id="el"> </div>

Script Preparation code:

var a = document.querySelector('#el');

Tests:

element.textContent
a.textContent = Math.random();
node.textContent
a.firstChild.textContent = Math.random();
node.nodeValue
a.firstChild.nodeValue = Math.random();
node.data
a.firstChild.data = Math.random();
element.innerHtml
a.innerHTML = Math.random();
append
a.firstChild.remove(); a.appendChild(document.createTextNode(Math.random()));