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

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

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

到这个：

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

所以我有这个：

<div id="destination"><div id="source">...</div></div>
1350564 次浏览
小开
最佳答案

您可能希望使用#0函数（它添加到元素的末尾）：

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

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

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

小开

我只是使用：

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

我从这里抓起。

小开

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

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

如果要放置元素的div里面有内容，并且要向元素之前显示主要内容：

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

如果要放置元素的div为空，或者您想完全取代：

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

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

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

您也可以尝试：

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

但这将完全覆盖您在#destination中的任何内容。

小开

您可以使用：

要插入之后，

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

要插入另一个元素，

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

我的解决方案：

移动：

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

复制：

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

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

小开

我注意到insertAfter和after或insertBefore和before之间存在巨大的内存泄漏和性能差异…如果你有大量的DOM元素，或者你需要在鼠标移动事件中使用after()或before()，浏览器内存可能会增加，接下来的操作会运行得很慢。

我刚刚遇到的解决方案是使用插入之前而不是before()和插入之后而不是after()。

小开

我需要将内容从一个容器移动到另一个容器包括所有的听众。jQuery没有办法做到这一点，但标准DOM函数附录可以做到。

// Assuming only one .source and one .target$('.source').on('click',function(){console.log('I am clicked');});$('.target')[0].appendChild($('.source')[0]);

使用附录删除. source*并将其放入目标，包括其事件侦听器：Node.appendChildren（）（MDN）

小开

如果您想快速演示并了解有关如何移动元素的更多详细信息，请尝试此链接：

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

下面是一个简短的例子：

移动到元素上方：

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

移动到一个元素之后：

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

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

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

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

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

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

 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>

小开

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

检查出来。

小开

尝试纯JavaScript：destination.appendChild(source);。

onclick = function(){ destination.appendChild(source) };
div {margin: .1em;}
#destination {border: solid 1px red;}
#source {border: solid 1px gray;}
<div id=destination>###</div><div id=source>***</div>

小开

为了完整起见，这篇文章中提到了另一种方法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。

小开

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

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

提示：如果你想创建一个新的段落，文本，记得将文本创建为附加到段落的Text节点，然后将段落附加到文档中。

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

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

所以你可以这样做来完成这项工作，这是我为你创建的，使用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>

小开

Bekim Bacaj的回答的脏尺寸改进：

div { border: 1px solid ; margin: 5px }
<div id="source" onclick="destination.appendChild(this)">click me</div><div id="destination" >...</div>

小开

.appendChild正是这样做的-基本上是剪切和粘贴。

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


提交答案