innerHTML vs createElement

Benchmark created on

Description

Creating fragment via innerHTML vs creating multiple elements

Preparation HTML

<div id="root"></div>

Setup

const root = document.getElementById('root');

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
root.innerHTML = `<div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div><div class="e"></div>`;
const a = root.querySelector('.a');
const b = root.querySelector('.b');
const c = root.querySelector('.c');
const d = root.querySelector('.d');
const e = root.querySelector('.e');
ready
createElement
const a = document.createElement('div');
a.classList.add('a');
const b = document.createElement('div');
b.classList.add('b');
const c = document.createElement('div');
c.classList.add('c');
const d = document.createElement('div');
d.classList.add('d');
const e = document.createElement('div');
e.classList.add('e');
root.append(a, b, c, d, e);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.