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

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

jquery jquery-plugins

如何使用jQuery将子元素从一个父元素移动到另一个父元素,jquery,jquery-plugins,Jquery,Jquery Plugins,我正在使用jQuery插件。我想移动搜索框。dataTables\u筛选器和要显示的记录数下拉列表。dataTables\u从其父元素的长度。dataTables\u包装到我页面上的另一个div，而不会丢失任何已注册的javascript行为。例如，搜索框有一个附加到“keyup”事件的函数，我想保持它的完整性 DOM如下所示： <body> <div id="parent1"> <div class="dataTables_wrapper" id="table

我正在使用jQuery插件。我想移动搜索框。dataTables\u筛选器和要显示的记录数下拉列表。dataTables\u从其父元素的长度。dataTables\u包装到我页面上的另一个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，使元素完全定位-但坦率地说，页面上到处都是流体元素，我真的希望这些元素在新的父元素中浮动

非常感谢您提供的任何帮助。

$'parent2'。前置$'table1\u length'。前置$'table1\u 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.appendToparentNode

不需要分离

截至2013年，答案很简单：

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

据

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

$'.container'。追加$'h2'

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

您列出的所有DOM操作函数都应该可以正常工作。将DOM元素附加到不同的父元素会将其移动到新位置，并保持所有事件的完整性。到底什么对你不起作用？有错误吗？是命名问题。我上面的例子很好用。字段的实际id中有多个-，我没有选择元素，因为id不匹配。谢谢。这是最好的解决方案，因为detach+append不会克隆元素，但会将其移动到新位置。事件和关联的数据不会以这种方式丢失这应该标记为应答；除了你不需要分离。请参见下面的答案。@JackArbiter-detach对我很有用，因为我需要暂时从父对象中删除子对象以进行处理，然后将它们放回其原始父对象CPS样式，因此虽然在问题的实例父对象到收养父对象中没有用，但它确实解决了我的问题；此方法克隆元素，但不移动它们。特别是，如果在moveTo调用之前存储在变量$'nodeToMove'中，它将不起作用anymore@Jage为什么不使用JQuery语法？$'nodeToMove'.appendTo'newParent'；我发现detach在IE甚至Edge等旧浏览器中给了我一种不同的行为。例如，如果父元素被分离并附加，则引导DateTimePicker将不起作用，但是简单地使用附加来移动我的元素会让DateTimePicker感到高兴。