Come spostare un elemento nel DOM?

Question

Ho un elemento #superWidget nel DOM che è molto interattivo. Utilizza l'interfaccia utente jquery ordinabile, trascinabile e un sacco di altri plugin.

<div id="wrapperA"></div> 
<div id="wrapperB"> 
    <div id="superWidget"></div> 
</div> 

Desidero modificare la posizione di #superWidget nel DOM. Voglio rimuoverlo da #wrapperB e metterlo in #wrapperA.

<div id="wrapperA"> 
    <div id="superWidget"></div> 
</div> 
<div id="wrapperB"></div> 

Ho provato quanto segue ...

var copy = $("#superWidget").clone(true, true); 
$("#superWidget").remove(); 
$("#wrapperA").append(copy); 

... tuttavia questo rompe un sacco di plugin.

Non voglio dover ripetere di nuovo tutto. C'è un modo migliore per farlo? (Ho notato che jQuery UI ordinabile è in qualche modo in grado di spostare gli elementi nel DOM senza rompere alcuna interattività ... ci deve essere un modo.)

Grazie (in anticipo) per il vostro aiuto

Answer 1

Piuttosto che duplicare , fai solo questo:

document.getElementById('wrapperA').appendChild(document.getElementById('superWidget'));