javascript - 如何将元素移动到另一个元素？(How to move an element into another element?)

Question

I would like to move one DIV element inside another.

(我想将一个DIV元素移到另一个元素中。)

For example, I want to move this (including all children):

(例如，我想移动它（包括所有孩子）：)

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

into this:

(进入这个：)

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

so that I have this:

(所以我有这个：)

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

  ask by Mark Richman translate from so

Answer 1

You may want to use the appendTo function (which adds to the end of the element):

(您可能想要使用appendTo函数（添加到元素的末尾）：)

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

Alternatively you could use the prependTo function (which adds to the beginning of the element):

(或者你可以使用prependTo函数（它添加到元素的开头）：)

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

---

Example:

(例：)

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