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

我正在使用jQuery DataTables插件.我想将搜索框(.dataTables_filter)和记录数从其父元素(.dataTables_wrapper)显示下拉列表(.dataTables_length)到我页面上的另一个div而不会丢失任何已注册的javascript行为.例如,搜索框有一个附加到'keyup'事件的函数,我想保持完整.

DOM看起来像这样:

  

    

      
        10
        25
        50
        100
      
    
    

      
    
    
    ...
    
  


  

    
Link A
    
Link B
    
Link C
  

这就是我希望DOM移动后的样子:

  

    
    ...
    
  


  

    
  
  

    
      10
      25
      50
      100
    
  
  

    
Link A
    
Link B
    
Link C
  

我一直在查看.append(),. appendTo(),. prepend()和.prependTo()函数,但在实践中没有任何运气.我还查看了.parent()和.parents()函数,但似乎无法编写可行的解决方案.我也考虑过改变CSS以便元素绝对定位 - 但坦率地说,页面设置了流畅的元素,我真的希望这些元素能够在他们的新父母中浮动.

对此有任何帮助非常感谢.

1> eric.itzhak..：

---

由于Jage的答案完全删除了元素,包括事件处理程序和数据,我正在添加一个简单的解决方案,由于该detach功能,它不会这样做.

var element = $('#childNode').detach();
$('#parentNode').append(element);

编辑:

Igor Mukhin在下面的评论中提出了一个更短的版本:

$("#childNode").detach().appendTo("#parentNode");

---

甚至更短的`$("#childNode").detach().appendTo("#parentNode");`

---

这是最好的解决方案,因为detach()+ append()不会克隆元素,但会将其移动到新位置.事件和关联数据不会以这种方式丢失

---

除了你不需要分离.请参阅下面的答案.

---

这应该标记为答案.

---

@JackArbiter - `detach`对我很有用,因为我需要暂时从父进程中删除子进程进行处理,然后用原始父进程(CPS样式)将它们放回去,所以虽然在问题的实例中没有用处(对于收养的父亲)父母)它确实解决了我的问题;)

2> JackArbiter..：

---

Detach 没必要.

答案(截至2013年)很简单:

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

根据http://api.jquery.com/append/

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

$(".容器 ')附加($(' H2' ));

如果以这种方式选择的元素被插入到DOM中其他位置的单个位置,则它将被移动到目标中(未克隆).

---

我发现，分离使我在IE（甚至Edge）等旧版浏览器中表现出不同的行为。例如，如果分离并附加了父元素，则Bootstraps DateTimePicker将不起作用，但是仅使用append（）移动我的元素即可使DateTimePicker满意。

3> Alex Lawford..：

---

$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));

不适合你吗？我认为应该......

---

请参阅eric的解决方案

4> Jage..：

---

根据提供的答案,我决定制作一个快速插件来执行此操作:

(function($){
    $.fn.moveTo = function(selector){
        return this.each(function(){
            var cl = $(this).clone();
            $(cl).appendTo(selector);
            $(this).remove();
        });
    };
})(jQuery);

用法:

$('#nodeToMove').moveTo('#newParent');

---

此方法克隆元素不移动它们.特别是如果你在moveTo调用之前存储在变量$('#nodeToMove')中它将不再起作用