Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
JS: insertBefore vs append vs prepend vs appendChild vs insertAdjacentElement
(version: 0)
Comparing performance of:
insertBefore vs append vs prepend vs appendChild vs insertAdjacentElement
Created:
2 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="container"></div>
Script Preparation code:
var container = document.getElementById( 'container' ); var paragraphs = new Array( 100 ).fill( 'p' );
Tests:
insertBefore
paragraphs.forEach( p => container.insertBefore( document.createElement( p ), null ) );
append
paragraphs.forEach( p => container.append( document.createElement( p ) ) );
prepend
paragraphs.forEach( p => container.prepend( document.createElement( p ) ) );
appendChild
paragraphs.forEach( p => container.appendChild( document.createElement( p ) ) );
insertAdjacentElement
paragraphs.forEach( p => container.insertAdjacentElement( 'beforeend', document.createElement( p ) ) );
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
insertBefore
append
prepend
appendChild
insertAdjacentElement
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Comments
Confirm delete:
Do you really want to delete benchmark?