如何删除() HTML 元素然后添加() 它？

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

另一种方式：

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

或者你也可以这样做：

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

因为 ID 应该是唯一的。

请注意，虽然您没有指定 tbody 元素，但浏览器总是会插入一个元素。这就是为什么您不能只将行添加到 table 元素的前面。

更新：正确地说，事实上你可以，正如 @Šime Vidas 指出的那样。

参考： 前置

Answer 3

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

一般来说，如果您想要添加一个元素，同时保留其所有数据，您应该使用 jQuery .detach() 方法 ^[文档]。一旦将元素从当前位置分离，就可以将其插入到新位置。

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

如果以这种方式选择的单个元素插入到其他地方，它将被移动到目标中（而不是克隆）：

Answer 4

jQuery 前置

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)); 
})

小提琴 : http://jsfiddle.net/Z3VrV/1/

或者这个 :

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

小提琴 : http://jsfiddle.net/Z3VrV/2/