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

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

在这方面:

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

所以我有这个:

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

当前回答

您也可以尝试:

$("#destination").html($("#source"))

但这将完全覆盖#destination中的所有内容。

其他回答

使用普通JavaScript解决方案:

// Declare a fragment:
var fragment = document.createDocumentFragment();

// Append desired element to the fragment:
fragment.appendChild(document.getElementById('source'));

// Append fragment to desired element:
document.getElementById('destination').appendChild(fragment);

过来看。

您可以使用以下代码将源移动到目标:

 jQuery("#source")
       .detach()
       .appendTo('#destination');

尝试使用CodePen。

函数move(){jQuery(“#source”).detch().appendTo(“#destination”);}#来源{背景色:红色;颜色:#ffffff;显示:内联块;填充:35px;}#目的地{背景色:蓝色;颜色:#ffffff;显示:内联块;填充:50px;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“source”>我是消息源</div><div id=“destination”>我是目的地</div><button onclick=“move();”>移动</button>

如果您想要快速演示并了解有关如何移动元素的更多详细信息,请尝试以下链接:

http://html-tuts.com/move-div-in-another-div-with-jquery


下面是一个简短的示例:

要在元素上方移动:

$('.whatToMove').insertBefore('.whereToMove');

要在元素后移动,请执行以下操作:

$('.whatToMove').insertAfter('.whereToMove');

要在元素内移动,请在该容器内的所有元素上方:

$('.whatToMove').prependTo('.whereToMove');

要在元素内移动,请在该容器内的所有元素之后:

$('.whatToMove').appendTo('.whereToMove');

我需要将内容从一个容器移动到另一个容器,包括所有事件侦听器。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)

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

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