Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Element.append vs Node.appendChild
(version: 1)
Comparing performance of:
Element.append vs Node.appendChild
Created:
21 days ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="testDiv"></div>
Script Preparation code:
// async function globalMeasureThatScriptPrepareFunction() {}
Tests:
Element.append
"use strict"; for (let i=0; i<100; i++) { const p = document.createElement("p"); p.textContent = i; testDiv.append(p); } testDiv.innerHTML="";
Node.appendChild
"use strict"; for (let i=0; i<100; i++) { const p = document.createElement("p"); p.textContent = i; testDiv.appendChild(p); } testDiv.innerHTML="";
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Element.append
Node.appendChild
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
21 days ago
)
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/OS:
Safari 26 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Element.append
13792.9 Ops/sec
Node.appendChild
14672.6 Ops/sec
Related benchmarks:
frag vs append document
textContent vs innerText
createElement vs createDocumentFragment
createElement vs createDocumentFragment 1
insertAdjacentHTML VS append VS appendChild (createDocumentFragment) [MINIMAL]
insertAdjacentHTML VS append VS appendChild (createDocumentFragment) [div only]
appendChild vs append 2
textcontent vs nodevalue vs content:after
textContent vs innerHTML vs innerText vs
Comments
Confirm delete:
Do you really want to delete benchmark?