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

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

在这方面:

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

所以我有这个:

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

当前回答

使用普通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);

过来看。

其他回答

我刚刚使用了:

$('#source').prependTo('#destination');

我从这里抓起的。

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

您也可以尝试:

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

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

如果要放置元素的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>