用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