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

Question

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

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

变成这样：

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

以便我拥有这个：

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

- Mark Richman

---

请使用 $(target_element).append(to_be_inserted_element); 进行插入操作。 - Mohammad Areeb Siddiqui

使用纯JavaScript实现将source元素添加到destination元素中的方法是：destination.appendChild(source)。 - luke

我们能用CSS实现这个吗？这是可能的吗？ - Raj Kumar Samala

CSS不能改变HTML的结构，只能调整其展示效果。 - Mark Richman

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>

- Andrew Hare

---

警告：在jQuery Mobile中可能无法正确工作，因为它可能会创建元素的另一个副本。 - Jordan Reiter

appento是创建一个副本还是实际移动整个div到目标位置？（因为如果是复制，通过id调用div会造成错误） - user1031721

以下是一篇关于使用jQuery删除、替换和移动元素的优秀文章：http://www.elated.com/articles/jquery-removing-replacing-moving-elements/。 - xhh

请注意jQuery的appendTo文档中指出，元素是被移动的：它将被移动到目标位置（而不是克隆），并返回一个由插入元素组成的新集合- http://api.jquery.com/appendto/ - John K

你不需要移动它，只需要添加。下面的答案进行了正确的移动操作。 - Aaron

文档还说：“但是，如果有多个目标元素，则在第一个目标之后为每个目标创建插入元素的克隆副本，并返回该新集合（原始元素加上克隆）。”。因此，在一般情况下，这个解决方案可以创建副本！ - Vincent Pazeller

Answer 2

我的解决方案：

移动：

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

复制:

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

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

- Alejandro Illecas

---

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

抱歉，但是安德鲁·哈尔（Andrew Hare）的答案是正确的——detach 不必要。在 Pixic 的 JSFiddle 中尝试一下——如果您删除 detach 调用，则结果完全相同，即进行移动而不是复制。根据 API 文档：https://api.jquery.com/appendTo/:“如果以这种方式选择的元素被插入到DOM中的其他单个位置，则它将被移动到目标位置（而不是克隆），并返回由插入元素组成的新集合。” - John - Not A Number

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

看一下这个。

- Ali Bassam

---

为什么要使用createDocumentFragment而不是简单地使用document.getElementById('destination').appendChild(document.getElementById('source'))？ - Gunar Gessner

由于文档片段存储在内存中而不是主DOM树的一部分，将子元素附加到文档片段中不会引起页面重新布局（计算元素的位置和几何形状）。从历史上看，使用文档片段可能会提高性能。 - undefined

Answer 4

尝试使用纯JavaScript？destination.appendChild(source);。

addEventListener("click", () => document.getElementById("destination").appendChild(document.getElementById("source")));

div {
  margin: .1em;
}

#destination {
  border: solid 1px red;
}

#source {
  border: solid 1px gray;
}

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

- Bekim Bacaj

---

还有其他选项，例如append，insertAdjacentElement。 - Sebastian Simon

@SebastianSimon，请随意并热情地编写您自己的原始方法和解决方案/答案，使用其他选项并应用您的JS编写风格教义。我更喜欢古老的方式。干净的JS和HTML方式。那个在浏览器战争中幸存下来的方式。那个总是有效的。当它不起作用时 - 我知道这是程序员的错。;) - Bekim Bacaj

我的评论是针对你回答的未来读者。我只是想说，有几种不同的DOM插入方法。appendChild只是其中之一，但根据用例，其他人可能会发现append或insertAdjacentElement更有用或更合适。这并不一定需要另一个答案，因为从根本上讲，这个问题是关于在DOM中将元素“移动”到其他地方。基本答案是简单地将它们_插入_到其他地方，因为元素只能在DOM中存在一次。我不知道你评论的其余部分是如何相关的。 - Sebastian Simon

“编辑对于保持帖子清晰、相关和最新非常重要。如果您不喜欢其他可信用户协作编辑您的贡献，那么这可能不是适合您的网站。” ——来自帮助中心。 - Sebastian Simon

Answer 5

我刚刚使用了：

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

这些内容是我从这里获取的。

- kjc26ster

---

“detach” 可以在你想要保留元素并稍后重新插入它时发挥作用，但是在你的例子中，你无论如何都会立即重新插入它。 - Tim Büthe

Answer 6

如果你想要把元素放在一个带有内容的

中，并且希望该元素在主内容之后显示：

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

如果你想把元素放到一个含有内容的 div 中，并且希望在主要内容之前展示该元素：

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

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

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

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

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

- itsme

Answer 7

您可以使用：

在后面插入，

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

插入到另一个元素内部：

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

- Subrahmanyam

Answer 8

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

 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>

- Subodh Ghulaxe

Answer 9

如果您想快速了解如何移动元素并获取更多详细信息，请尝试访问以下链接：

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

---

这里是一个简短的示例：

要在元素上方移动：

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

移动一个元素之后：

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

为了在元素内部移动，首先要移动到容器内所有元素的上方：

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

在一个容器内，移动到该容器中的所有元素之后的位置：

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

- Dan

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* 并且包括它的事件监听到目标中： Node.appendChild() (MDN)

- HMR