如何使用jquery将子元素从一个父元素移动到另一个父元素

How to move child element from one parent to another using jQuery

本问题已经有最佳答案，请猛点这里访问。

我正在使用jquery数据表插件。我想将搜索框(.datatables_filter)和要显示下拉列表的记录数(.datatables_length)从其父元素(.datatables_wrapper)移动到我页面上的另一个div，而不会丢失任何已注册的javascript行为。例如，搜索框有一个附加到"keyup"事件的函数，我希望保持它的完整性。

DOM如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

这就是我希望移动后的DOM的外观：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

我一直在研究.append()、.appendto()、.prepend()和.prependto()函数，但在实践中并没有遇到过这些函数。我还研究了.parent()和.parents()函数，但似乎无法编写可行的解决方案。我也考虑过更改CSS，这样元素就可以完全定位了——但坦率地说，页面上到处都是流体元素，我真的希望这些元素在它们的新父代中浮动。

对此任何帮助都非常感谢。

相关讨论

由于Jage的回答完全删除了元素，包括事件处理程序和数据，所以我添加了一个简单的解决方案，由于detach函数的缘故，它不做这件事。

1 2	var element = $('#childNode').detach(); $('#parentNode').append(element);

编辑：

Igor Mukhin在下面的评论中提出了一个更简短的版本：

$("#childNode").detach().appendTo("#parentNode");

相关讨论

detach是不必要的。

答案(截至2013年)很简单：

1	$('#parentNode').append($('#childNode'));

根据http://api.jquery.com/append/

You can also select an element on the page and insert it into another:

$('.container').append($('h2'));

If an element selected this way is inserted into a single location
elsewhere in the DOM, it will be moved into the target (not cloned).

相关讨论

$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));

不适合你吗？我认为应该…

相关讨论

根据所提供的答案，我决定制作一个快速插件来做这件事：

1
2
3
4
5
6
7
8
9

(function($){
$.fn.moveTo = function(selector){
return this.each(function(){
var cl = $(this).clone();
$(cl).appendTo(selector);
$(this).remove();
});
};
})(jQuery);

用途：

1	$('#nodeToMove').moveTo('#newParent');

相关讨论