Run results for: append() vs appendChild() for moving a couple elements

ParentNode.append() is more convenient. Is it also faster when moving several elements at once from a parent A to a parent B? 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:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36

Browser: Chrome 90

Operating system: Linux

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
append()	188258.8 Ops/sec
appendChild()	211582.9 Ops/sec
append() with apply()	197918.3 Ops/sec
appendChild() with loop	192002.5 Ops/sec

HTML Preparation code:

<div id="oldpar"><div id="e1"></div><div id="e2"></div><div id="e3"></div><div id="e4"></div></div>
<div id="newpar"></div>

Script Preparation code:

var newpar = document.getElementById('newpar');
var e1 = document.getElementById('e1');
var e2 = document.getElementById('e2');
var e3 = document.getElementById('e3');
var e4 = document.getElementById('e4');
var es = [e1, e2, e3, e4];

Tests:

append()
newpar.append(e1, e2, e3, e4);
appendChild()
newpar.appendChild(e1); newpar.appendChild(e2); newpar.appendChild(e3); newpar.appendChild(e4);
append() with apply()
newpar.append.apply(newpar, es);
appendChild() with loop
for (var i = 0; i < es.length; i++) newpar.appendChild(es[i]);

Run results for: append() vs appendChild() for moving a couple elements

ParentNode.append() is more convenient. Is it also faster when moving several elements at once from a parent A to a parent B? 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