Question

Basically what I need to do is to “move” an HTML element, not position-wise but location of it’s DOM structure.

Eg

<table id="main">
<tr id="row1"><td></td></tr>
<tr id="row2"><td></td></tr>
<tr id="row3"><td></td></tr>
</table>

How do I move “tr#row3” to the top of “table#main”?
Can use jQuery.

Answer 1

Another way:

$('#main tbody').prepend(function() {
    return $(this).find('#row3');
});

or you could also do:

$('#main tbody').prepend($('#row3'));

as IDs are supposed to be unique.

Note that although you don’t specify a tbody element, the browser will always insert one. That’s why you cannot just prepend the row to the table element.

Update: To be correct, in fact you can, as @Šime Vidas pointed out.

Reference: prepend