我正在使用 jQuery数据表 http://datatables.net/插入。我想将搜索框（.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，以便元素绝对定位 - 但坦白说，页面上到处都是流动元素，我真的希望这些元素浮动在它们的新父元素中。
非常感谢任何对此的帮助。
由于 Jage 的答案完全删除了元素，包括事件处理程序和数据，因此我添加了一个不这样做的简单解决方案，这要归功于detach https://api.jquery.com/detach/功能。
var element = $('#childNode').detach();
$('#parentNode').append(element);
Edit:
Igor Mukhin 在下面的评论中建议了一个更短的版本：
$("#childNode").detach().appendTo("#parentNode");
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
