如何将元素移动到另一个元素？-Java 学习之路

1479

我想将一个DIV元素移到另一个元素中 . 例如，我想移动它（包括所有孩子）：

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

进入这个：

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

所以我有这个：

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

13 回答

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

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

或者，您可以使用prependTo函数（添加到元素的开头）：

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

例：

$("#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>

回复于 2024-04-26T13:43:27+08:00

4
老问题但是到了这里因为我需要将内容从一个容器移动到另一个容器 including all the event listeners .

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/en-US/docs/Web/API/Node.appendChild
回复于 2024-04-26T13:43:27+08:00
10
您也可以尝试：
```
$("#destination").html($("#source"))
```
但这将完全覆盖 #destination 中的任何内容 .
回复于 2024-04-26T13:43:27+08:00
16
您可以使用：

要插入之后，
```
jQuery("#source").insertAfter("#destination");
```
要插入另一个元素，
```
jQuery("#source").appendTo("#destination");
```
回复于 2024-04-26T13:43:27+08:00
69
我的解决方案

移动：
```
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
```
复制：
```
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
```
注意.detach（）的用法 . 复制时，请注意不要复制ID .
回复于 2024-04-26T13:43:27+08:00
1620

JavaScript 解决方案怎么样？

声明一个片段：

var fragment = document.createDocumentFragment();

将所需元素附加到片段：

fragment.appendChild(document.getElementById('source'));

将片段附加到所需元素：

document.getElementById('destination').appendChild(fragment);

Check it out.

回复于 2024-04-26T13:43:27+08:00
16
我刚用过：
```
$('#source').prependTo('#destination');
```
我从here抓起 .
回复于 2024-04-26T13:43:27+08:00
5
如果要放置元素的 div 中包含内容，并且您希望元素显示在主要内容之后：
```
$("#destination").append($("#source"));
```
如果要放置元素的 div 里面有内容，并且想要在主要内容之前显示元素：
```
$("#destination").prepend($("#source"));
```
如果要放置元素的 div 为空，或者您想要完全替换它：
```
$("#element").html('<div id="source">...</div>');
```
如果要在上述任何一个之前复制元素：
```
$("#destination").append($("#source").clone());
// etc.
```
回复于 2024-04-26T13:43:27+08:00

804

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

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

尝试工作codepen

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>

回复于 2024-04-26T13:43:27+08:00

曾经尝试过普通的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>

回复于 2024-04-26T13:43:27+08:00

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

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

Here is a short example:

要移动一个元素：
```
$('.whatToMove').insertBefore('.whereToMove');
```
要移动一个元素：
```
$('.whatToMove').insertAfter('.whereToMove');
```
要在元素内移动，请在该容器内ABOVE ALL元素：
```
$('.whatToMove').prependTo('.whereToMove');
```
要在元素内移动，请在该容器内的所有元素之后：
```
$('.whatToMove').appendTo('.whereToMove');
```
回复于 2024-04-26T13:43:27+08:00
0

我注意到insertAfter＆after或insertBefore＆before之间存在巨大的内存泄漏和性能差异 . 如果你有大量的DOM元素，或者你需要在MouseMove事件中使用after（）或before（），浏览器内存可能会增加接下来的操作将会非常缓慢 . 我刚刚遇到的解决方案是使用inserBefore而不是（）和insertAfter而不是（） .

回复于 2024-04-26T13:43:27+08:00
105
为了完整起见，this article中提到了另一种方法 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>...</label> . 所以我最终使用了显式的 $("row1").append("#a_predefined_fieldset") . 所以，YMMV .
回复于 2024-04-26T13:43:27+08:00

如何将元素移动到另一个元素？

13 回答

相关问题