如何將元素移動到另外一個元素？

我想將一個DIV元素移到另外一個元素中。 例如，我想移動它（包括全部孩子）：

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

進入這個：

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

因此我有這個：

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

---

#1樓

我剛用過：

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

我從這裏抓住了 。

---

#2樓

您可能想要使用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>

---

#3樓

若是要放置元素的div包含內容，而且您但願元素顯示在主要內容以後：

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

若是要放置元素的div包含內容，而且要在主要內容以前顯示元素：

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

若是要放置元素的div爲空，或者您想要徹底替換它：

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

---

若是要在上述任何一個以前複製元素：

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

---

#4樓

您也能夠嘗試：

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

但這將徹底覆蓋#destination任何內容。

---

#5樓

您能夠使用：

要插入以後，

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

要插入另外一個元素，

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