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

【问题标题】：How to move an element into another element?如何将一个元素移动到另一个元素中？
【发布时间】：2010-11-19 18:43:09
【问题描述】：

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

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

进入这个：

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

所以我有这个：

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

【问题讨论】：

只需使用 $(target_element).append(to_be_inserted_element);
或者：destination.appendChild(source) 使用纯 javascript
我们可以使用 CSS 实现这一点吗？这可能吗？
@RajKumarSamala CSS 不能改变 HTML 的结构，只能改变它的表现形式。

标签： javascript jquery html

【解决方案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>

【讨论】：

警告说这在 jQuery mobile 中可能无法正常工作，因为它可能会创建另一个元素的副本。
appenTo 是创建副本还是实际将整个 div 移动到目的地？（因为如果它复制，它会在通过 id 调用 div 时产生错误）
这是一篇关于在 jQuery 中删除、替换和移动元素的优秀文章：elated.com/articles/jquery-removing-replacing-moving-elements
注意 jQuery 文档 appendTo 声明元素被移动：it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned - api.jquery.com/appendto
你没有移动它，只是追加。下面的答案做了一个适当的移动。

【解决方案2】：

我的解决方案：

移动：

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

复制：

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

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

【讨论】：

最佳答案。接受的答案会创建一个副本，不会像问题要求的那样移动元素。
对不起，但 Andrew Hare 接受的答案是正确的 - 分离是不必要的。在上面的 Pixic 的 JSFiddle 中尝试一下——如果你删除了分离调用，它的工作原理完全相同，即它会移动，而不是复制。这是只进行了一次更改的分支：jsfiddle.net/D46y5 如 API 中所述：api.jquery.com/appendTo：“如果以这种方式选择的元素插入到 DOM 中其他位置的单个位置，它将被移动到目标中（不克隆) 并返回由插入元素组成的新集合"

【解决方案3】：

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

Check it out.

【讨论】：

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

【解决方案4】：

我刚用过：

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

我从here获取的。

【讨论】：

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

【解决方案5】：

曾经尝试过纯 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>

【讨论】：

【解决方案6】：

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

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

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

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

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

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

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

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

【讨论】：

【解决方案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');

尝试工作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>

【讨论】：

【解决方案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

【讨论】：

【解决方案11】：

你也可以试试：

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

但这会完全覆盖您在#destination 中的所有内容。

【讨论】：

【解决方案12】：

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

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>

【讨论】：

【解决方案13】：

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

我刚刚体验到的解决方案是用inserBefore代替before()，用inserAfter代替after()。

【讨论】：

【解决方案14】：

Bekim Bacaj answer 的脏大小改进

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

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

【讨论】：

【解决方案15】：

为了完整起见，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。

【讨论】：