Appending 400 rows to a table one at a time makes the browser invalidate layout after each insertion, because each one changes a tree that is still being rendered. Taking the container out of the document first means the same 400 inserts touch nothing on screen, and the layout happens once when it goes back.
var $body = $('#orders tbody');
var $table = $body.closest('table');
$body.detach(); // out of the document, still ours
for (var i = 0; i < rows.length; i++) {
$body.append(renderRow(rows[i]));
}
$table.append($body); // one layout instead of 400.detach() is .remove() without the destruction: jQuery keeps the element’s data and its bound handlers, so the node that goes back is the node that came out. .remove() discards both, which is why people who tried this once concluded it does not work. The alternative that needs no bookkeeping at all is a DocumentFragment — build the rows into it and append the fragment once, a single insertion with nothing to put back. Detaching is what is left when the container itself has to survive because it carries classes, handlers or a scroll position. That scroll position is the catch: an element outside the document does not have one, so a detached list comes back scrolled to the top.