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

我使用的是 jQuery 数据表插件。我想移动搜索框(。DataTables _ filter)和显示下拉列表的记录数(。DataTables _ length)来自它们的父元素(。将 dataTables _ wrapper)转换为页面上的另一个 div，而不会丢失任何已注册的 javascript 行为。例如，搜索框有一个附加到“ keyup”事件的函数，我想保持它的完整性。

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>

我一直在看。附录()。附录()。前置()及。函数，但是在实际应用中没有任何运气。我还看了。家长()及。但似乎不能编写一个可行的解决方案。我也考虑过改变 CSS，这样元素就绝对定位了——但是坦率地说，页面上到处都是流动的元素，我真的希望这些元素能在它们的新父元素中浮动。

非常感谢你的帮助。

202064 次浏览
小开
最佳答案

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

不适合你? 我觉得应该..。

小开

根据提供的答案，我决定做一个快速插件:

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

用法:

$('#nodeToMove').moveTo('#newParent');
小开

由于 Jage 的回答完全删除了元素(包括事件处理程序和数据) ，因此我添加了一个不这样做的简单解决方案，这要感谢 detach函数。

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

编辑:

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

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

小开

Detach是不必要的。

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

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

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

您还可以在页面上选择一个元素并将其插入到另一个元素中:

$(‘ . container’) . append ($(‘ h2’)) ;

如果以这种方式选择的元素插入到单个位置 在 DOM 的其他地方，它将被移动到目标中(而不是被克隆)。


提交答案