如何使用jQuery将子元素从一个父元素移动到另一个父元素[重复]
Posted
技术标签:
【中文标题】如何使用jQuery将子元素从一个父元素移动到另一个父元素[重复]【英文标题】：How to move child element from one parent to another using jQuery [duplicate] 【发布时间】：2011-02-05 12:17:36 【问题描述】：我正在使用 jQuery DataTables 插件。我想将搜索框 (.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>
我一直在研究 .append()、.appendTo()、.prepend() 和 .prependTo() 函数，但在实践中没有任何运气。我还查看了 .parent() 和 .parents() 函数，但似乎无法编写可行的解决方案。我还考虑过更改 CSS 以使元素绝对定位 - 但坦率地说，页面设置了流畅的元素，我真的希望这些元素浮动在它们的新父级中。
非常感谢您提供任何帮助。
【问题讨论】：
您列出的所有 DOM 操作函数都应该可以正常工作。将 DOM 元素附加到不同的父元素会将其移动到新位置，从而保持所有事件不变。到底什么不适合你？有错误吗？ 【参考方案1】：由于 Jage 的回答完全删除了元素，包括事件处理程序和数据，我添加了一个简单的解决方案，但由于 detach 函数，我不会这样做。
var element = $('#childNode').detach();
$('#parentNode').append(element);
编辑：
Igor Mukhin 在下面的 cmets 中建议了一个更短的版本：
$("#childNode").detach().appendTo("#parentNode");
【讨论】：
这是最好的解决方案，因为 detach()+append() 不会克隆元素，而是会将其移动到新位置。事件和相关数据不会以这种方式丢失 这应该被标记为答案。 更短的$("#childNode").detach().appendTo("#parentNode");
除非你不需要分离。请参阅下面的答案。
@JackArbiter - detach 对我很有用，因为我需要暂时从父级中删除子级进行处理，然后将它们放回原来的父级（CPS 样式），所以虽然没用在问题的例子中（父母到养父母）它确实解决了我的问题;）【参考方案2】：
Detach 是不必要的。
答案（截至 2013 年）很简单：
$('#parentNode').append($('#childNode'));
根据http://api.jquery.com/append/
您还可以选择页面上的一个元素并将其插入另一个：
$('.container').append($('h2'));
如果以这种方式选择的元素被插入到单个位置 在 DOM 的其他地方，它将被移动到目标中（未克隆）。
【讨论】：
我发现 detach 在 IE（甚至 Edge）等旧浏览器中给了我不同的行为。例如，如果父元素被分离和附加，Bootstraps DateTimePicker 将不起作用，但是只需使用 append() 移动我的元素就可以让 DateTimePicker 满意。【参考方案3】：$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));
不适合你？我觉得应该...
【讨论】：
这是一个命名问题。我上面的例子工作正常。字段的实际 id 中有多个 - 和 _，我没有选择元素，因为 id 不匹配。谢谢。【参考方案4】：根据提供的答案，我决定制作一个快速插件来做到这一点：
(function($)
$.fn.moveTo = function(selector)
return this.each(function()
var cl = $(this).clone();
$(cl).appendTo(selector);
$(this).remove();
);
;
)(jQuery);
用法：
$('#nodeToMove').moveTo('#newParent');
【讨论】：
此方法克隆元素不移动它们。特别是如果你在 moveTo 调用之前存储在变量 $('#nodeToMove') 中，它将不再起作用 @Jage 为什么不使用 JQuery 语法？ $('#nodeToMove').appendTo('#newParent'); api.jquery.com/appendto以上是关于如何使用jQuery将子元素从一个父元素移动到另一个父元素[重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何从另一个子 td 元素检查父 tr 元素内的 td 元素的值