如何使用jQuery将子元素从一个父元素移动到另一个父元素
如何使用jQuery将子元素从一个父元素移动到另一个父元素
此问题已经有答案:
我正在使用 jQuery DataTables 插件。我想要将搜索框（.dataTables_filter）和要显示记录数的下拉菜单（.dataTables_length）从它们的父元素（.dataTables_wrapper）移动到我的页面上的另一个 div 中，同时不会失去任何已注册的 javascript 行为。例如，搜索框附有“keyup”事件的函数，我想保持它的完好无损。
DOM 如下：
...
这是移动后我想要 DOM 看起来的样子：
...
我一直在研究 .append()、.appendTo()、.prepend() 和 .prependTo() 函数，但是实践中没有什么进展。我也查看了 .parent() 和 .parents() 函数，但似乎编写可行的解决方案很困难。我也考虑过改变 CSS，使元素绝对定位——但坦白地说，页面上到处都是流体元素，我真的希望这些元素在它们的新父元素中浮动。
非常感谢您的帮助。
admin 更改状态以发布 2023年5月22日
Detach不必要。
答案（截至2013年）很简单：
$('#parentNode').append($('#childNode'));
根据 http://api.jquery.com/append/
您还可以选择页面上的元素并将其插入到另一个元素中：
$('.container').append($('h2'));
如果以这种方式选择的元素被插入到 DOM 中的其他单个位置中，则它将被移动到目标（而不是克隆）。
由于Jage的答案会完全删除元素，包括事件处理程序和数据，因此我添加了一个简单的解决方案，不会这样做，感谢detach函数。
var element = $('#childNode').detach();
$('#parentNode').append(element);
编辑：
在下面的评论中，Igor Mukhin提出了一个更短的版本：
$("#childNode").detach().appendTo("#parentNode");