Benchmark: append vs innerHTML

HTML Preparation code:


<p id='bar'></p>

Script Preparation code:


var el = document.getElementById('bar');
var html = '<span class="red">Some text here</span> fdsfjdasfkjdasfkljdasflj';

Tests:

Rendered benchmark preparation results:

Previous results

Test case name	Result
innerHTML
append

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

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Browser/OS: Chrome 100 on Windows

Test name	Executions per second
innerHTML	83511.9 Ops/sec
append	414938.4 Ops/sec

append vs innerHTML (version: 0)