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

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36

Browser: Chrome 89

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
append()	151593.0 Ops/sec
appendChild()	155567.6 Ops/sec
append() with apply()	144519.2 Ops/sec
appendChild() with loop	137606.7 Ops/sec

Script Preparation code:

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]);

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

append()

appendChild()

append() with apply()

appendChild() with loop