Question: Simply put, I'm trying to move a submenu from one location to another. (Easy) 
I need to do this without losing any event handlers, etc. (Harder)

```
  <ul id="Menu A">
      <li id="submenu">My Submenu with Clicky Events</li>
  </ul>
  <ul id="Menu B">
      <!--This is where I want to move #submenu (with) all its' events intact -->
  </ul>

```

I've tried the following without success:

```
    var submenu = $('#submenu').clone(true,true);
    submenu.prependTo('.Menu B'); 

```

Ideally, I can find a solution without using jQuery, but if you have a solution that works with it, that would be okay.

Answer: 
With jQuery you can use [.appendTo()](https://api.jquery.com/appendto/)

```
$('#element_to_move').appendTo('#PARENT_at_destination');

```

jQuery will cut it from its present location and move it to the new location, without losing bindings etc. *However, styles could be affected because the DOM location will change.*

This could also be helpful: <https://api.jquery.com/detach/>
I realize this thread is super old but if anyone is here and wants to move an element WITHOUT jQuery, you can simply use `insertBefore` and this will move the element with all of its children and retain all event listeners, etc.

For example:

```
let el = document.getElementById("thingBeingMoved");
let moveTo = document.getElementById("otherThing");
moveTo.parentNode.insertBefore(el, moveTo);

```

`moveTo` is the element in the document that will be just after or next to the element being moved. If you want to move to the very end you can just get the parent container and use `appendChild`.

I am using this to reorder rows that contain many child elements including charts that are created with an external library. Even if the charts have not finished loading/rendering while I am doing the move, it does not cause any issues because the container and all of it's children that are being moved is not destroyed or altered in any way. In fact, I can still see the charts being loaded into the container as I am moving it using some pretty basic drag and drop event handlers and setting the elements position like this:

```
element.style.position = "fixed";
element.style.left= pageX + "px";
element.style.top = pageY + "px";
element.style.zIndex = 99;

```