Как удалить () элемент HTML, а затем prepend () его?

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

поскольку идентификаторы должны быть уникальными.

Обратите внимание, что, хотя вы не указываете элемент tbody, браузер будет всегда вставлять его. Вот почему вы не можете просто добавить строку к элементу table.

Обновление: Чтобы быть точным, на самом деле вы можете, как указал @ Šime Vidas.

Ссылка: prepend

Answer 3

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() isn 'т необходимо.Из документов:

Если отдельный элемент , выбранный таким образом, вставлен в другое место, он будет перемещен в цель (не клонирован):

Answer 4

jQuery prepend

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

Answer 5

Как это? :

$("#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/

Answer 6

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

, вероятно, самый простой способ