jQuery 如何使用jQuery将子元素从一个父元素移动到另一个父元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2596833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to move child element from one parent to another using jQuery
提问by Dom
I am using the jQuery DataTablesplugin. I would like to move the search box (.dataTables_filter) and number of records to display dropdown (.dataTables_length) from their parent element (.dataTables_wrapper) to another div on my page without losing any registered javascript behavior. For instance the search box has a function attached to the 'keyup' event and I want to keep that intact.
我正在使用 jQuery DataTables插件。我想将搜索框 (.dataTables_filter) 和显示下拉列表 (.dataTables_length) 的记录数从它们的父元素 (.dataTables_wrapper) 移动到我页面上的另一个 div，而不会丢失任何已注册的 javascript 行为。例如，搜索框有一个附加到 'keyup' 事件的功能，我想保持它的完整性。
The DOM looks like this:
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>
This is what I would like the DOM to look like after the move:
这是我希望 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>
I've been looking at the .append(), .appendTo(), .prepend() and .prependTo() functions but haven't had any luck with these in practice. I've also looked at the .parent() and .parents() functions, but can't seem to code a workable solution. I have also considered changing the CSS so that the elements are absolutely positioned - but to be frank the page is setup with fluid elements all over, and I really want these elements to be floated in their new parents.
我一直在研究 .append()、.appendTo()、.prepend() 和 .prependTo() 函数，但在实践中没有任何运气。我还查看了 .parent() 和 .parents() 函数，但似乎无法编写可行的解决方案。我还考虑过更改 CSS 以便元素绝对定位 - 但坦率地说，页面设置了整个流体元素，我真的希望这些元素在它们的新父元素中浮动。
Any help with this is much appreciated.
非常感谢您对此的任何帮助。
采纳答案by Alex Lawford
$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));
$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));
doesn't work for you? I think it should...
不适合你？我觉得应该...
回答by eric.itzhak
As Jage's answer removes the element completely, including event handlers and data, I'm adding a simple solution that doesn't do that, thanks to the detachfunction.
由于 Jage 的回答完全删除了元素，包括事件处理程序和数据，因此我添加了一个不这样做的简单解决方案，这要归功于该detach功能。
var element = $('#childNode').detach();
$('#parentNode').append(element);
Edit:
编辑：
Igor Mukhin suggested an even shorter version in the comments below:
Igor Mukhin 在下面的评论中建议了一个更短的版本：
$("#childNode").detach().appendTo("#parentNode");
$("#childNode").detach().appendTo("#parentNode");
回答by HymanArbiter
Detachis unnecessary.
Detach是不必要的。
The answer (as of 2013) is simple:
答案（截至 2013 年）很简单：
$('#parentNode').append($('#childNode'));
According to http://api.jquery.com/append/
根据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).
您还可以选择页面上的一个元素并将其插入到另一个元素中：
$('.container').append($('h2'));
如果以这种方式选择的元素被插入到 DOM 中其他地方的单个位置，它将被移动到目标中（而不是克隆）。
回答by Jage
Based on the answers provided, I decided to make a quick plugin to do this:
根据提供的答案，我决定制作一个快速插件来做到这一点：
(function($){
$.fn.moveTo = function(selector){
return this.each(function(){
var cl = $(this).clone();
$(cl).appendTo(selector);
$(this).remove();
});
};
})(jQuery);
Usage:
用法：
$('#nodeToMove').moveTo('#newParent');
