Clear children via this.innerHTML = '' vs replaceChildren()

Benchmark created on

Preparation HTML

<div id='myTestContainer'><div>

Setup

const container = document.getElementById('myTestContainer');

function addChildren(count) {
	for (let i = 0; i < count; i++) {
		const bold = document.createElement('b');
		bold.textContent = 'some bold text';
		const child = document.createElement('div');
		child.append('foo', bold, 'bar');
		container.append(child);
	}
}

Test runner

Ready to run.

Testing in
TestOps/sec
no children - innerHTML
container.innerHTML = '';
ready
no children - replaceChildren()
container.replaceChildren();
ready
1 child - innerHTML
addChildren(1);
container.innerHTML = '';
ready
1 child - replaceChildren
addChildren(1);
container.replaceChildren();
ready
10 children - innerHTML
addChildren(10);
container.innerHTML = '';
ready
10 children - replaceChildren
addChildren(10);
container.replaceChildren();
ready
100 children - innerHTML
addChildren(100);
container.innerHTML = '';
ready
100 children - replaceChildren
addChildren(100);
container.replaceChildren();
ready
1000 children - innerHTML
addChildren(1000);
container.innerHTML = '';
ready
1000 children - replaceChildren
addChildren(1000);
container.replaceChildren();
ready

Revisions

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