CODEWITHSUNDEEP
javascriptdom
user1031947
user1031947

Reputation: 6674

How to move an element in the DOM?

I want to change the position of #superWidget in the DOM. I want to remove it from #wrapperB and place it in #wrapperA.

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

I have tried the following...

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

...however this breaks a lot of the plugins used by my page.

I do not want to have to rebind everything. Is there a better way to do this? (I notice that jquery UI sortable is somehow able to move elements around in the DOM without breaking any interactivity... there must be a way.)

Thanks (in advance) for your help

Upvotes: 23

Views: 34179

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324840

Rather than duplicating, just do this:

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

Upvotes: 59

Related Questions