javascript - tag - jquery innertext




如何將元素移動到另一個元素中? (8)

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

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

進入這個:

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

所以我有這樣的:

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

你也可以嘗試:

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

但是這會完全覆蓋#destination任何內容。


如果您想要快速演示以及有關如何移動元素的更多詳細信息,請嘗試以下鏈接:

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

嘗試工作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>


您可以使用:

插入後,

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

要插入另一個元素內,

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


我注意到insertAfter&after或insertBefore&before之間存在巨大的內存洩漏和性能差異。如果您有大量DOM元素,或者您需要在MouseMove事件中使用after()或before(),則瀏覽器內存可能會增加,接下來的操作會運行得非常慢。 我剛剛遇到的解決方案是使用inserBefore,而不是before()和insertAfter,而不是()之後。


曾嘗試普通的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>


老問題,但到了這裡,因為我需要將內容從一個容器移動到另一個容器, 包括所有事件監聽器

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.appendChildhttps://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild





html