Przenoszenie elementu DOM za pomocą append()?

Question

mam div elementu podobnego

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

... że chciałbym ruch z jednego miejsca do innego w DOM. Mogę to zrobić z appendTo(), tak:

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

... czy będzie to powielić go?

Jeśli zostanie powielony, będą dwa elementy z tym samym id w DOM. Jak mogłem tego uniknąć?

Answer 1

Tak, metoda appendTo przenosi elementy z drzewa DOM. Jeśli chcesz skopiować element, użyto .clone().

przykład:

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

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

Answer 2

wziąłem bezpośrednio z dokumentacji jQuery http://api.jquery.com/append/

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

„Jeżeli element wybrany w ten sposób jest umieszczona w jednym miejscu, gdzie indziej w DOM, zostanie przeniesiony do celu (niesklonowanego): "

Answer 3

Możesz to zrobić za pomocą .append lub .after lub podobnych metod.

<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> 

Więc kod, aby przesunąć pierwszy .li z .list1 do .list2 będą:

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

Working pen