append（）でDOM要素を移動しますか？

Question

は私が私がDOM内の別の1つの位置から移動が好きだろうと...

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

ようdiv要素を持っています。 appendTo()でこれを行うことはできますか：

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

...これはそれを複製しますか？

重複している場合は、DOM内に同じidという2つの要素があります。どうすればこの問題を回避できますか？

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

私はこのように選択された要素は、他の場所でDOM内の単一の位置に挿入されている場合http://api.jquery.com/append/

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

」は、それが移動するjQueryのドキュメントから直接取りました（クローン化されていない）ターゲット： "

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> 

ので.list2に.list1から最初.liを移動するためのコードは次のようになります。

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

Working pen