संलग्न करने के साथ एक DOM तत्व को स्थानांतरित करना()?

Question

मैं एक div तत्व

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

की तरह है ... कि मैं करना चाहते हैं डोम में एक से दूसरे स्थान से कदम। मैं appendTo() के साथ ऐसा कर सकते हैं, तो जैसे:

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

... या इस यह नकल होगा?

यदि इसे डुप्लिकेट किया जा रहा है, तो DOM में id के साथ दो तत्व होंगे। मैं इससे कैसे बच सकता हूं?

Answer 1

हां, appendTo विधि डीओएम पेड़ से तत्वों को ले जाती है। यदि आप किसी तत्व की प्रतिलिपि बनाना चाहते हैं, तो .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")); 

"इस तरह से चयनित एक तत्व डोम में कहीं और एक ही स्थान में डाला जाता है, तो यह ले जाया जाएगा लक्ष्य में (क्लोन नहीं): "

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