Run results for: DOM structure: bottom up vs top down vs DocumentFragment

Test name	Executions per second
✓ Top down	167,639 Ops/sec
Mixed with append()	165,763 Ops/sec
Real top down	151,603 Ops/sec
Bottom up	150,378 Ops/sec
Top down (DocumentFragment)	142,057 Ops/sec

Bottom up

const container = document.getElementById('container');
const ul = document.createElement('ul');
for (const d of '123456') {
  const li = document.createElement('li');
  li.textContent = d;
  ul.appendChild(li);
}
const div = document.createElement('div');
div.appendChild(ul);
container?.appendChild(div).remove();

Top down

const container = document.getElementById('container');
const div = document.createElement('div');
const ul = div.appendChild(document.createElement('ul'));
for (const d of '123456') {
  const li = document.createElement('li');
  li.textContent = d;
  ul.appendChild(li);
}
container?.appendChild(div).remove();

Real top down

const container = document.getElementById('container');
const ul = container
	.appendChild(document.createElement('div'))
	.appendChild(document.createElement('ul'));
for (const d of '123456') {
  const li = document.createElement('li');
  li.textContent = d;
  ul.appendChild(li);
}
container?.firstElementChild?.remove();

Top down (DocumentFragment)

const container = document.getElementById('container');
const fragment = document.createDocumentFragment();
const ul = fragment
	.appendChild(document.createElement('div'))
	.appendChild(document.createElement('ul'));
for (const d of '123456') {
  const li = document.createElement('li');
  li.textContent = d;
  ul.appendChild(li);
}
container.appendChild(fragment);
container?.firstElementChild?.remove();

Mixed with append()

const container = document.getElementById('container');
const lis = Array.from('123456').map((d) => {
  const li = document.createElement('li');
  li.textContent = d;
  return li;
});
const div = document.createElement('div');
const ul = div.appendChild(document.createElement('ul'))
	.append(...lis);
container?.appendChild(div).remove();