Run results for: JS: append vs prepend vs insertBefore vs appendChild vs insertAdjacentElement in a populated table

The similar tests I found here "test" adding one single node to another singe node. Those tests are quite useless for real world situations. The use case here is that the rows array is sorted (not included) and then the table is restructured accordingly.

Run details:

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

Browser: Chrome 124

Operating system: Windows

Device Platform: Desktop

Date tested: 6 months ago

Test name	Executions per second
append	68.4 Ops/sec
prepend	64.5 Ops/sec
insertBefore	5.3 Ops/sec
appendChild	66.3 Ops/sec
insertAdjacentElement	66.1 Ops/sec

HTML Preparation code:

<table><tbody id="body"></tbody></table>

Script Preparation code:

var rows = [];
for (var i = 0; i < 10000; ++i) {
    var row = document.createElement("tr");
    var cell = document.createElement("td");
    cell.appendChild(document.createTextNode(i));
    row.appendChild(cell);
    body.appendChild(row);
    rows.push(row);
}
var nodes = body.childNodes;

Tests:

append
for (var i = 0; i < 10000; ++i) { body.append(rows[i]); }
prepend
for (var i = 0; i < 10000; ++i) { body.prepend(rows[i]); }
insertBefore
for (var i = 0; i < 10000; ++i) { body.insertBefore(rows[9999 - i], nodes[i]); }
appendChild
for (var i = 0; i < 10000; ++i) { body.appendChild(rows[i]); }
insertAdjacentElement
for (var i = 0; i < 10000; ++i) { body.insertAdjacentElement("beforeend",rows[i]); }