javascript - jquery的appendto - jq append



如何将元素移动到另一个元素中? (8)

你也可以尝试:

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

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

https://ffff65535.com

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

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

进入这个:

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

所以我有这样的:

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

关于JavaScript解决方案呢?

声明一个片段:

var fragment = document.createDocumentFragment();

将所需的元素追加到片段中:

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

追加片段到所需的元素:

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

一探究竟。


如果您要放置元素的div在内容中包含内容,并且您希望该元素在主内容之后显示:

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

如果您想要将元素放入内容的div ,并且您希望在主要内容之前显示该元素,请执行以下操作:

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

如果你想要放置元素的div是空的,或者你想完全替换它:

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

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

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

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

 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>


您可能想要使用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("#NodesToMove").detach().appendTo('#DestinationContainerNode')

复制:

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

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


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





html