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


我想将一个DIV元素移到另一个元素中。例如,我想移动它(包括所有孩子):

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

进入这个:

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

所以我有这个:

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

1432
2017-08-14 20:14


起源


只需使用$(target_element).append(to_be_inserted_element); - Mohammad Areeb Siddiqui
或者:destination.appendChild(source)使用普通的javascript - luke
我们能用CSS实现吗?那可能吗 ? - RajKumar Samala
@RajKumarSamala CSS不能改变HTML的结构,只能改变它的表现形式。 - Mark Richman


答案:


你可能想要使用 appendTo 函数(添加到元素的末尾):

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

或者你可以使用 prependTo function(添加到元素的开头):

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


1581
2017-08-14 20:16



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


我的解决方案

移动:

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

复制:

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

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


780
2017-11-06 01:50



为此解决方案制作了一个JSFiddle: jsfiddle.net/Pixic/8VrdE - Pixic
最佳答案。接受的答案创建副本,不会像问题那样移动元素。 - paulscode
对不起,但Andrew Hare接受的答案是正确的 - 分离是不必要的。在上面的Pixic的JSFiddle中尝试它 - 如果你删除分离调用它完全相同,即它做一个移动,而不是一个副本。这是只有一个变化的分叉: jsfiddle.net/D46y5  如API中所述: api.jquery.com/appendTo :“如果以这种方式选择的元素插入到DOM中其他位置的单个位置,它将被移动到目标(未克隆)中,并返回由插入元素组成的新集合” - John - Not A Number
@ John-Notanumber是对的 - 这里不需要detach()。接受的答案是最好的,您只需要正确阅读文档。 - LeonardChallis
appendTo文档还说:“但是,如果有多个目标元素,则会在第一个目标元素之后为每个目标创建插入元素的克隆副本,并返回该新集合(原始元素加克隆)。”所以在一般情况下,这个解决方案也可以创建副本! - Vincent Pazeller


我刚用过:

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

我抓住了哪个 这里


104
2017-07-24 18:51



好吧,当您想要保留元素并稍后重新插入时,分离很有用,但在您的示例中,无论如何都会立即重新插入。 - Tim Büthe
我担心我不太了解你的目标,你能提供样本代码吗? - kjc26ster
我的意思是,prependTo,将元素从其原始位置分离,将其插入新元素。另一方面,分离功能只是分离选定的元素,您可以将其保存在变量中,以便稍后将其插入DOM。问题是,您的分离呼叫是不必要的。删除它,你将达到同样的效果。 - Tim Büthe


如果 div 你想把你的元素放在哪里,你希望元素显示  主要内容:

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

如果 div 你想把你的元素放在里面的内容,你想要显示元素 之前 主要内容:

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

如果 div 你想把你的元素放在哪里是空的,或者你想要的 更换 它完全是:

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

如果要在上述任何一个之前复制元素:

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

81
2017-11-15 20:04



你不能使用选择器 .append()。如果使用字符串作为参数,它将在字面上将“#other_element”附加到元素。 - Phil Bozak
@PhilBozak好,是的,我的错误:),如果你想要你自由编辑 - sbaaaang
我发现所有粗体字有点难以阅读,但这是最具信息性的答案,所以它得到了我的支持。 - Michael Scheper


怎么样? JavaScript的 解?

声明一个片段:

var fragment = document.createDocumentFragment();

将所需元素附加到片段:

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

将片段附加到所需元素:

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

一探究竟。


66
2018-06-24 10:43



为什么使用createDocumentFragment而不仅仅是document.getElementById('destination')。appendChild(document.getElementById('source'))? - Gunar C. Gessner
@ GunarC.Gessner假设您需要在将源对象添加到目标对象之前修改源对象,那么最好的方法是使用片段作为虚构对象并且不是DOM树的一部分,在修改时会获得更好的性能源对象从它的原始位置(现在它在片段内)转换后,而不是在附加它之前在它的初始位置修改它。 - Ali Bassam
我想补充一下提供JavaScript纯解决方案的相关性。不应该假设jQuery总是被使用 - Alexander Fradiani
问题:在附加子节点时,我们是否丢失了附加事件? - jimasun
我自己的问题的答案是肯定的,它确实保留了附加的事件。 - jimasun


您可以使用:

要插入之后,

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

要插入另一个元素,

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

27
2018-05-02 13:53





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


18
2017-11-02 08:49



*有人加前缀 全球事件  onclick 带有关键字的演示代码段 var 他/她试图提高职位 - 但那是错的! - Bekim Bacaj
令人惊讶的是人们仍然认为jQuery等于JavaScript。真的,2017年不再需要jQuery了。 - nbrogi


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

 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>


16
2018-02-17 22:03





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

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


这是一个简短的例子:

要移动一个元素:

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

要移动一个元素:

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

要在元素内移动,请在该容器内ABOVE ALL元素:

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

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

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

15
2017-12-24 04:06





老问题但是到了这里因为我需要将内容从一个容器移动到另一个容器 包括所有事件监听器

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


10
2017-12-05 12:40