MeasureThat.net

Run results for: JS: append vs appendChild multiple insert

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36
Chrome 115
Windows
Desktop
one year ago
Test name Executions per second
append 113943.5 Ops/sec
appendChild 106550.2 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="container"></div>
2
<div id='p1'></div>
3
<div id='p2'></div>
4
<div id='p3'></div>
5
<div id='p4'></div>
6
<div id='p5'></div>
Script Preparation code:
 
var container = document.getElementById("container");
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var p3 = document.getElementById("p3");
var p4 = document.getElementById("p4");
var p5 = document.getElementById("p5");
Tests:

  • append

     
    container.append(p1, p2, p3, p4, p5);

  • appendChild

     
    container.appendChild(p1);
    container.appendChild(p2);
    container.appendChild(p3);
    container.appendChild(p4);
    container.appendChild(p5);