我想将一个DIV元素移动到另一个元素中。例如,我想移动此(包括所有子对象):

<div id="source">
  ...
</div>

在这方面:

<div id="destination">
  ...
</div>

所以我有这个:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

当前回答

我需要将内容从一个容器移动到另一个容器,包括所有事件侦听器。jQuery没有实现它的方法,但标准的DOM函数appendChild可以实现。

// Assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

使用appendChild删除.source*并将其放入目标,包括其事件侦听器:Node.appendChild()(MDN)

其他回答

为了完整起见,本文中提到了另一种方法wrap()或wrapAll()。因此,OP的问题可以通过以下方式解决(即,假设<div id=“destination”/>还不存在,以下方法将从头创建这样的包装器-OP不清楚包装器是否已经存在):

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

听起来很有希望。然而,当我试图对多个嵌套结构执行$(“[id^=row]”).wrapAll(“<fieldset></fieldset>”)时,如下所示:

<div id="row1">
    <label>Name</label>
    <input ...>
</div>

它正确地包装了那些<div></div>和<input></input>但是有人把<label></标签>。所以我最终使用了显式的$(“row1”).append(“#a_predefined_fieldset”)。所以,YMMV。

我的解决方案:

移动:

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

副本:

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

注意.detach()的用法。复制时,请注意不要复制ID。

appendChild正是这样做的——基本上是剪切粘贴。

它将移动选定的元素及其所有子节点。

如果要放置元素的div中包含内容,并且希望元素显示在主要内容之后:

  $("#destination").append($("#source"));

如果要放置元素的div中包含内容,并且希望在主要内容之前显示元素:

$("#destination").prepend($("#source"));

如果要放置元素的div为空,或者要完全替换它:

$("#element").html('<div id="source">...</div>');

如果要在上述任一项之前复制元素:

$("#destination").append($("#source").clone());
// etc.

尝试纯JavaScript:destination.appendChild(源代码);。

onclick=function(){destination.appendChild(源)};第二部分{边距:.1em;}#目的地{边框:实心1px红色;}#来源{边框:实心1px灰色;}<div id=destination>###</div><div id=源>***</div>