如何将元素移动到另一个元素中？ [英] How to move an element into another element?

问题描述

我想将一个DIV元素移入另一个元素。例如，我想移动它（包括所有的孩子）：

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

转换为：

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

让我拥有这个：

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

解决方案

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

  $（＃source）。appendTo（＃destination）; 
  

或者，您可以使用 prependTo 函数（添加到元素的开头）：

  $（ ＃源）prependTo（ ＃目的地）。 
  

---

示例：

  #main {border：2px solid blue ; moveMeIntoMain {border：1px solid red;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =将主要< div id =moveMeIntoMainclass =moveMeIntoMain>移动到主< / div>< button id =appendTo> appendTo main< / button>< button id =prependTo> prependTo main< / button>  

I would like to move one DIV element inside another. 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>

解决方案

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

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

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

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

这篇关于如何将元素移动到另一个元素中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！