MeasureThat.net

Run results for: ParentNode.append() vs Node.appendChild() for adding a couple elements

ParentNode.append() is more convenient. Is it also faster when needing to append several elements at once? https://developer.mozilla.org/en-US/docs/Web/API/Element/append https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Safari/605.1.15
Safari 12
Mac OS X 10.14.6
Desktop
one year ago
Test name Executions per second
append() 201558.0 Ops/sec
appendChild() 226164.2 Ops/sec
append() with apply() 201406.2 Ops/sec
appendChild() with loop 198030.3 Ops/sec
Script Preparation code:
AخA
 
var e1 = document.createElement('div');
var e2 = document.createElement('div');
var e3 = document.createElement('div');
var e4 = document.createElement('div');
var es = [e1, e2, e3, e4];
Tests:

  • append()

     
    document.body.append(e1, e2, e3, e4);

  • appendChild()

     
    document.body.appendChild(e1);
    document.body.appendChild(e2);
    document.body.appendChild(e3);
    document.body.appendChild(e4);

  • append() with apply()

     
    document.body.append.apply(document.body, es);

  • appendChild() with loop

     
    for (var i = 0; i < es.length; i++) document.body.appendChild(es[i]);