Question

基本上我需要做的是“移动”一个HTML元素，而不是位置，而是它的DOM结构的位置。

例如

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

如何将“tr＃row3”移到“table＃main”的顶部？可以使用jQuery。

Answer 1

普通的js方式是：

var row = document.getElementById('row3');
var parent = row.parentNode;
parent.insertBefore(row, parent.firstChild);

Answer 2

var row = table.find("#row3");
var parent = row.parent(); // because parent may not be #main
parent.prepend(row.detach());

通常，如果您想要更多元素，同时保留其所有数据，则应使用jQuery .detach()方法^[docs]。将元素从当前位置分离后，可以将其插入新元素中。

但是，在这种情况下，.prepend()和.append()实际上会默认执行您想要的操作，因此不需要.detach()。来自文档：

如果以其他方式选择了以这种方式选择的单个元素，它将被移动到目标中（未克隆）：

Answer 3

另一种方式：

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

或者您也可以这样做：

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

因为ID应该是唯一的。

请注意，虽然您未指定tbody元素，但浏览器始终插入一个元素。这就是为什么你不能只将行添加到table元素。

更新：说实话，事实上你可以像@ŠimeVidas指出的那样。

参考： prepend

Answer 4

var el = $('#row3');
$('#main').prepend(el);

Answer 5

var row3 = $("tr#row3")
$("#main").prepend(row3);
row3.remove();

可能是最简单的方式

Answer 6

喜欢这个？：

$("#row3").mouseenter(function () {
    $("#row1").before($(this)); 
})

或者这个：

$("#row3").click(function () {
    $(this).parent(":first-child").before($(this)); 
})