Question

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

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

进入这个：

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

所以我有这个：

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

Answer 1

您可能想要使用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>

Answer 2

我的解决方案：

MOVE：

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

COPY：

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

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

Answer 3

我刚刚使用过：

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

我从here抓住了。

Answer 4

如果要放置元素的div包含内容，并且您希望元素在主要内容后显示：

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

如果要放置元素的div包含内容，并且您希望在主要内容之前显示元素：

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

如果要放置元素的div为空，或者您希望替换，则

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

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

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

Answer 5

JavaScript 解决方案呢？

声明片段：

var fragment = document.createDocumentFragment();

将所需元素附加到片段：

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

将片段附加到所需元素：

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

<强> Check it out.

Answer 6

您可以使用：

要插入后，

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

要在另一个元素中插入，

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

Answer 7

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

＆＃13;

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

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>

＆＃13;

Answer 8

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

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

以下是一个简短的例子：

向上移动一个元素：

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

要在元素之后移动：

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

要在元素内移动，请在该容器内包含所有元素：

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

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

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

Answer 9

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

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

尝试codepen

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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/en-US/docs/Web/API/Node.appendChild

Answer 11

您也可以尝试：

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

但这会完全覆盖#destination中的任何内容。

Answer 12

我注意到了巨大的内存泄漏和insertAfter＆amp; amp;之后或者插入之前和之后之前..如果你有大量的DOM元素，或者你需要在MouseMove事件中使用after（）或before（），浏览器内存可能会增加，而下一个操作的运行速度会非常慢。我刚刚遇到的解决方案是使用inserBefore而不是（）和insertAfter而不是（）。

Answer 13

Bekim Bacaj answer的脏物尺寸改善

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

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

Answer 14

出于完整性考虑，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。

Answer 15

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

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

提示：如果要创建带有文字的新段落，请记住   将文本创建为文本节点，然后将其添加到段落中，然后   将段落添加到文档中。

您还可以使用此方法将一个元素从一个元素移动到   另一个。

提示：使用insertBefore（）方法将新的子节点插入到   指定的现有子节点。

因此您可以执行此操作，这就是我使用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>

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

15 个答案: