我想将一个DIV元素移到另一个元素中。例如，我要移动此对象（包括所有子对象）：

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


移至此： >这样我就可以了：

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


评论

只需使用$（target_element）.append（to_be_inserted_element）;
或者：使用普通javascript
destination.appendChild（source）
我们可以使用CSS来实现吗？有可能吗？
@RajKumarSamala CSS不能更改HTML的结构，只能更改其表示形式。

#1 楼

曾经尝试过普通的JavaScript ... destination.appendChild(source);吗？ 




 onclick = function(){ destination.appendChild(source); } 

 div{ margin: .1em; } 
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; } 

 <!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>




评论

*某人在尝试增强帖子后，在演示代码段的全局事件onclick前面加上了关键字var-但这是错误的！

–贝金·巴卡（Bekim Bacaj）
17年7月23日在13:56
在2017年无需使用jquery，但有时在每个项目中一次又一次地执行一些任务时，可以使用更轻巧的东西。我使用Cash-dom作为一种以跨浏览器友好的方式监听document.ready，window.load事件的简便方法。十分简单。

–eballeste
19年12月12日在18:17
将其更改为可接受的答案，现在是2020年：)

–马克·里奇曼
4月16日20:55
人们仍然认为jQuery等同于JavaScript真是令人惊讶。实际上，2020年将不再需要jQuery。

–ii iil0sto1
4月23日8:50


令人惊讶的是，到2020年，人们将使用越来越多的JavaScript并仍然吹嘘jQuery是您不需要的“大”库。

–京瓷
7月21日1:28

#2 楼

您可能想使用appendTo函数（添加到元素的末尾）：元素）：

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



示例：




 prependTo 

 $("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
}); 

 #main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}




评论

警告这可能在jQuery mobile中无法正常工作，因为它可能会创建该元素的另一个副本。

–乔丹·瑞特（Jordan Reiter）
2012年6月19日14:07
appenTo创建副本还是实际上将整个div移动到目标位置？ （因为如果复制，则在通过id调用div时会产生错误）

–user1031721
2012年7月12日在22:04
这是一篇有关删除，替换和移动jQuery中元素的出色文章：elated.com/articles/jquery-removing-replacing-moving-elements

– xhh
2012年12月3日，7：55
请注意，jQuery的appendTo状态说明元素已移动：元素将被移动到目标中（未克隆），并返回包含插入元素的新集合-api.jquery.com/appendto

– John K
2014年1月13日在1:10


您没有移动它，只是追加。下面的答案做了适当的移动。

–亚伦
2014年5月28日下午3:42

#3 楼

我的解决方案：

移动：

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




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


注意.detach（）的用法。复制时，请注意不要复制ID。

评论

最佳答案。接受的答案会创建一个副本，不会像问题所要求的那样移动元素。

–paulscode
2013年12月17日19:02
抱歉，但是Andrew Hare接受的答案是正确的-分离是不必要的。在上面的Pixic的JSFiddle中尝试一下-如果删除detach调用，则它的工作原理完全相同，即它可以移动，而不是复制。这只是其中的一项更改：jsfiddle.net/D46y5如API中所述：api.jquery.com/appendTo：“如果将以此方式选择的元素插入DOM中其他位置的单个位置，则它将被移动到目标（未克隆）中，并返回由插入的元素组成的新集合”

–约翰-不是数字
2014年2月4日在4:34
@ John-NotANumber是正确的-这里不需要detach（）。公认的答案是最好的，您只需要正确阅读文档即可。

– LeonardChallis
2014年9月23日14:30在
appendTo文档还说：“但是，如果有多个目标元素，则将在第一个目标之后为每个目标创建插入元素的克隆副本，并返回该新集合（原始元素和克隆）。”因此，在一般情况下，此解决方案也可以创建副本！

– Vincent Pazeller
15年2月16日在10:01
大！或者，您可以使用它来更具体地将$（'＃nodeToMove'）。insertAfter（'＃insertAfterThisElement'）;移到何处；

– Victor Augusto
16-10-2在19:43


#4 楼

我刚刚使用过：

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


我从这里抓起的。

评论

好吧，当您要保留该元素并稍后再重新插入时，分离很有用，但是在您的示例中，无论如何您都立即将其重新插入。

–蒂姆·布特（TimBüthe）
2012年9月27日15:56
恐怕我不太了解您的意思，您能提供示例代码吗？

–kjc26ster
2012年11月3日，21：53
我的意思是prependTo，将元素从其原始位置分离出来，然后将其插入到新元素中。另一方面，分离功能只是分离选定的元素，您可以将其保存在变量中，以便稍后将其插入到DOM中。问题是，您的分离调用是不必要的。删除它，您将获得相同的效果。

–蒂姆·布特（TimBüthe）
2012年11月4日，9：24
令人难以置信的是，编辑完全改变了这个答案，以至于一年后又添加了另一个答案（与原始答案相同），并获得800多个投票...

–hlscalon
19年2月13日在12:52
是的，但是那是错的！而且这个答案没有得到赞誉，因为prependTo并不是OP要求的，而最被赞扬的答案是。对于所提出的问题，根本不需要分离。

–澳大利亚
8月19日11:55

#5 楼

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);


检查一下。

评论

为什么使用createDocumentFragment而不是简单的document.getElementById（'destination'）。appendChild（document.getElementById（'source'））？

– Gunar Gessner
16年2月16日在1:45
@ GunarC.Gessner假设您需要先修改源对象，然后再将其添加到目标对象，然后最好的方法是使用片段，它是一个虚构的对象，并且不属于DOM树的一部分，因此在修改源对象从其原始位置（现在位于片段内部）过渡后，而不是在附加位置之前在其原始位置进行修改。

–阿里·巴萨姆（Ali Bassam）
16年2月17日在21:12
我想补充一下提供JavaScript纯解决方案的相关性。不应该假设总是使用jQuery

–亚历山大·弗拉达尼（Alexander Fradiani）
16年6月10日在3:38
问题：在附加子节点时，我们是否会丢失附加事件？

– jimasun
16年11月15日在9:19
我自己的问题的答案是肯定的，它确实保留了所附事件。

– jimasun
16年11月15日在9:34

#6 楼

如果要放置元素的div里面有内容，并且希望元素显示在主要内容之后：

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


如果div要放置的位置将元素放置在内部，并且要在主要内容之前显示该元素：

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


如果要放置元素的div为空，或者您想完全替换它：

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



如果要在上述任何一个元素之前复制元素：

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


评论

我发现所有黑体字都有点难以理解，但这是最有用的答案，因此得到了我的好评。

–迈克尔·谢珀（Michael Scheper）
2014年6月26日在2:22

#7 楼

您可以使用：

要在之后插入，

jQuery("#source").insertAfter("#destination");


要插入另一个元素内，

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


#8 楼

如果您需要快速演示以及有关如何移动元素的更多详细信息，请尝试以下链接：

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


这是一个简短的示例：

要在元素上方移动：

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


要在元素之后移动：

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


要在元素内部移动，请在该容器内的所有元素上方：

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


要在一个元素内移动，请在该容器内的所有元素之后：

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


#9 楼

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

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


尝试工作代码笔




 function move() {
 jQuery("#source")
   .detach()
   .appendTo('#destination');
} 

 #source{
  background-color:red;
  color: #ffffff;
  display:inline-block;
  padding:35px;
}
#destination{
  background-color:blue;
  color: #ffffff;
  display:inline-block;
  padding:50px;
} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>

<div id="destination">
I am destination
</div>

<button onclick="move();">Move</button>




#10 楼

老问题了，但是到了这里，因为我需要将内容从一个容器移动到另一个容器，包括所有事件侦听器。

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并将其放置到目标（包括事件侦听器）中：https://developer.mozilla.org/zh-CN/docs/Web/API/ Node.appendChild

#11 楼

您也可以尝试：

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


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

评论

并在已移动的元素上中断事件侦听器。

–伊戈尔·波马兰斯基（Igor Pomaranskiy）
18 Mar 8 '18在15:51

#12 楼

我注意到insertAfter和after或insertBefore和before之间存在巨大的内存泄漏和性能差异。如果您有大量DOM元素，或者需要在MouseMove事件中使用after()或before()，则浏览器内存可能会增加，并且下一个操作将运行真的很慢。

我刚刚遇到的解决方案是使用inserBefore代替before()和insertAfter代替after()。

评论

这听起来像是JavaScript引擎实现相关的问题。您看到哪个浏览器版本和JS引擎？

–马克·里奇曼
14年8月23日在21:17
我使用的是Chrome版本36.0.1985.125，并使用jQuery v1.11.1。我在mousemove事件上绑定了一个函数，该事件将简单的DIV向下或向上移动鼠标悬停的元素。因此，此事件和功能在您拖动光标时运行。如果您将光标移动30秒以上，则会在after（）和before（）发生内存泄漏，而如果我只是使用insertAfter和insertBefore代替，它将消失。

–spetsnaz
2014年8月23日在21:29


我会在那个上与Google一起打开一个bug。

–马克·里奇曼
14年8月23日在21:33

#13 楼

您可以使用纯JavaScript，使用appendChild()方法...


appendChild（）方法将节点追加为节点的最后一个子节点。

提示：如果要创建带有文本的新段落，请记住
将文本创建为文本节点，然后将其添加到段落中，然后
将该段落添加到文档中。 />您还可以使用此方法将一个元素从一个元素移动到另一个元素。

提示：使用insertBefore（）方法在a
之前插入一个新的子节点。指定的，现有的子节点。


因此您可以执行此操作，这是我使用appendChild()为您创建的，运行并查看其如何用于您的案例： 




 function appendIt() {
  var source = document.getElementById("source");
  document.getElementById("destination").appendChild(source);
} 

 #source {
  color: white;
  background: green;
  padding: 4px 8px;
}

#destination {
  color: white;
  background: red;
  padding: 4px 8px;
}

button {
  margin-top: 20px;
} 

 <div id="source">
  <p>Source</p>
</div>

<div id="destination">
  <p>Destination</p>
</div>

<button onclick="appendIt()">Move Element</button>




#14 楼

为了完整起见，本文中提到了另一种方法wrap()或wrapAll()。因此，OP的问题可能会由此解决（即，假设<div id="destination" />尚不存在，以下方法将从头创建这样的包装器-OP尚不清楚包装器是否已存在）：

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



听起来很有希望。但是，当我尝试在像这样的多个嵌套结构上进行$("[id^=row]").wrapAll("<fieldset></fieldset>")时：所以我最终改用了显式的<div>...</div>。所以，YMMV。

#15 楼

Bekim Bacaj的脏污尺寸改善答案




 div { border: 1px solid ; margin: 5px } 

 <div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>