如何使用jQuery将子元素从一个父元素移动到另一个父元素[重复]答案

【问题标题】：How to move child element from one parent to another using jQuery [duplicate]如何使用jQuery将子元素从一个父元素移动到另一个父元素[重复]
【发布时间】：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 元素附加到不同的父元素会将其移动到新位置，从而保持所有事件不变。到底什么不适合你？有错误吗？

标签： jquery jquery-plugins

【解决方案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