Run results for: Appending list of elements

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4 Safari/605.1.15

Browser: Safari 26

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 21 days ago

Test name	Executions per second
Node.appendChild(el) in loop	9150.6 Ops/sec
Element.append(...els)	12394.5 Ops/sec
Node.appendChild(DocumentFragment) (DocumentFragment.appendChild(el) in loop)	16064.2 Ops/sec
Node.appendChild(DocumentFragment) (DocumentFragment.append(...els))	11740.0 Ops/sec
innerHTML	23389.4 Ops/sec

HTML Preparation code:

<div id="testDiv"></div>

Tests:

Node.appendChild(el) in loop
"use strict"; for (let i=0; i<100; i++) { const p = document.createElement("p"); p.textContent = i; testDiv.appendChild(p); } testDiv.innerHTML = "";
Element.append(...els)
"use strict"; const els = []; for (let i=0; i<100; i++) { const p = document.createElement("p"); p.textContent = i; els.push(p); } testDiv.append(...els); testDiv.innerHTML = "";
Node.appendChild(DocumentFragment) (DocumentFragment.appendChild(el) in loop)
"use strict"; const frag = document.createDocumentFragment(); for (let i=0; i<100; i++) { const p = document.createElement("p"); p.textContent = i; frag.appendChild(p); } testDiv.appendChild(frag); testDiv.innerHTML = "";
Node.appendChild(DocumentFragment) (DocumentFragment.append(...els))
"use strict"; const els = []; for (let i=0; i<100; i++) { const p = document.createElement("p"); p.textContent = i; els.push(p); } const frag = document.createDocumentFragment(); frag.append(...els); testDiv.appendChild(frag); testDiv.innerHTML = "";
innerHTML
"use strict"; let html = ""; for (let i=0; i<100; i++) { html += "<p>"+i+"</p>"; } testDiv.innerHTML = html; testDiv.innerHTML = "";