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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser: Chrome 123

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

node.nodeValue

2.2M/s

node.textContent

2.1M/s

node.data

2.1M/s

element.textContent

1.6M/s

append

1.1M/s

element.innerHtml

1.1M/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()));