如何将子元素从一个父母移动到另一个使用jQuery
我正在使用jQuery DataTables插件。 我想移动search框（.dataTables_filter）和logging数，以显示下拉（.dataTables_length）从他们的父元素（.dataTables_wrapper）到我的网页上的另一个div，而不会丢失任何注册的JavaScript行为。 例如，search框有一个附加到“keyup”事件的function，我想保持完整。
DOM看起来像这样：
<body> <div id="parent1"> <div class="dataTables_wrapper" id="table1_wrapper"> <div class="dataTables_length" id="table1_length"> <select size="1" name="table1_length"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> </div> <div class="dataTables_filter" id="table1_filter"> <input type="text" class="search"> </div> <table id="table1"> ... </table> </div> </div> <div id="parent2"> <ul> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li><a href="#">Link C</a></li> </ul> </div> </body> 这就是我想在移动之后看起来像DOM的东西：
<body> <div id="parent1"> <div class="dataTables_wrapper" id="table1_wrapper"> <table id="table1"> ... </table> </div> </div> <div id="parent2"> <div class="dataTables_filter" id="table1_filter"> <input type="text" class="search"> </div> <div class="dataTables_length" id="table1_length"> <select size="1" name="table1_length"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> </div> <ul> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li><a href="#">Link C</a></li> </ul> </div> </body>
我一直在看.append（），.appendTo（），.prepend（）和.prependTo（）函数，但在实践中没有任何运气。 我也看了.parent（）和.parents（）函数，但似乎无法编写一个可行的解决scheme。 我也考虑过改变CSS，使其元素是绝对定位的 – 但坦率地说，页面是stream体元素遍布，我真的希望这些元素漂浮在他们的新父母。
任何帮助，这是非常感谢。
$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));
不适合你？ 我认为应该…
正如Jage的答案完全删除了元素，包括事件处理程序和数据，我添加了一个简单的解决scheme，不这样做，多亏了detach函数。
var element = $('#childNode').detach(); $('#parentNode').append(element);
Detach是不必要的。
答案（截至2013年）很简单：
$('#parentNode').append($('#childNode'));
根据http://api.jquery.com/append/
您也可以select页面上的元素并将其插入到另一个元素中：
$（”。容器 '）附加（$（' H2' ））;
如果以这种方式select的元素被插入到DOM中其他地方的单个位置，它将被移动到目标（未克隆）。
基于提供的答案，我决定做一个快速的插件来做到这一点：
(function($){ $.fn.moveTo = function(selector){ return this.each(function(){ var cl = $(this).clone(); $(cl).appendTo(selector); $(this).remove(); }); }; })(jQuery);
用法：
$('#nodeToMove').moveTo('#newParent');
尝试这个：
var kids = $('#table1_wrapper').children(); $.each(kids, function(){ $('#table1_wrapper').remove($(this)); $('#anotherdiv').append($(this)); });
