Làm cách nào để di chuyển một phần tử trong DOM?

Question

Tôi có một phần tử #superWidget trong DOM rất tương tác. Nó sử dụng giao diện người dùng jquery có thể sắp xếp, kéo và một loạt các plugin khác.

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

Tôi muốn thay đổi vị trí #superWidget trong DOM. Tôi muốn xóa nó khỏi #wrapperB và đặt nó trong #wrapperA.

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

Tôi đã thử những điều sau đây ...

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

... tuy nhiên điều này phá vỡ rất nhiều các plugin.

Tôi không muốn phải khôi phục mọi thứ. Có cách nào tốt hơn để làm điều này? (Tôi nhận thấy rằng jquery UI sắp xếp được là bằng cách nào đó có thể di chuyển các yếu tố xung quanh trong DOM mà không vi phạm bất kỳ tương tác ... có phải là một cách.)

Cảm ơn (trước) để được giúp đỡ của bạn

Answer 1

Thay vì sao chép , chỉ cần thực hiện việc này:

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