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/117.0.0.0 Safari/537.36

Browser: Chrome 117

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
append	32.5 Ops/sec
prepend	33.4 Ops/sec
insertBefore	8.2 Ops/sec
appendChild	33.5 Ops/sec
insertAdjacentElement	33.6 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]); }