Benchmark: textContent vs nodeValue vs data vs innerHTML vs append

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()));

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: one month ago)

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/OS: Chrome 123 on Mac OS X 10.15.7

textContent vs nodeValue vs data vs innerHTML vs append (version: 0)