用append（）移動DOM元素？

Question

我有這樣

<div id="move">Something</div> 

一個div元素......，我想移動從一個位置到另一個DOM中。我可以這樣做，appendTo()，如下所示：

$('#move').fadeOut(500, function() { 
    $(this).appendTo('#another-container').fadeIn(500); 
}); 

...或者這會重複嗎？

如果它被複制，DOM中將會有兩個元素具有相同的id。我怎麼能避免這種情況？

Answer 1

是的，appendTo方法移動DOM樹中的元素。如果您想複製元素，則使用.clone()。

實施例：

Body: <div> 
      <a>Test</a> 
     </div> 
     <span></span> 
jQuery code: 
    $("a").appendTo("span"); 

After: <div></div> 
     <span> 
      <a>Test</a> 
     </span> 

Answer 2

我把它直接從jQuery文檔http://api.jquery.com/append/

$(".container").append($("h2")); 

「如果選擇這樣一個元件被插入在DOM別處的單個位置，這將被移動到目標（未克隆）：「

Answer 3

您可以使用.append或.after或類似方法。

<ul class="list1"> 
    <li>You wanted to move this element!</li> 
    <li>Element 2</li> 
    <li>Element 3</li> 
</ul> 

<ul class="list2"> 
    <li></li> 
    <li>Element 2</li> 
    <li>Element 3</li> 
</ul> 

<button onclick="moveIt()">Move element</button> 

因此，代碼到第一.li從.list1移動到.list2將是：

function moveIt() { 
    var elementToBeMoved = $(".list1 li:first"); 
    $(".list2 li:first").append(elementToBeMoved); 
} 

Working pen