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 JavaScript you don't have to `clone()` the node you want to move, just get a reference to it and then insert it wherever you want, for example:

```
// simple function to demonstrate a click-handling:
function spanClick (){
    // message to demonstrate that the function still works
    // without having to worry about cloning:
    console.log("So, you've clicked the span.");
    // moving the element elsewhere:
    div.appendChild(this);
}

// references to the various elements:
var span = document.getElementById('demo'),
    div = document.getElementById('recipient');

// assigning the click event-handler:
span.addEventListener('click', spanClick);

```

```js
function spanClick() {
  console.log("So, you've clicked the span.");
  div.appendChild(this);
}

var span = document.getElementById('demo'),
  div = document.getElementById('recipient');

span.addEventListener('click', spanClick);
```

```css
span {
  color: #f90;
}
div {
  border: 1px solid #000;
  margin: 1em;
}
div span {
  color: #0f0;
}
```

```html
<p>If you click the following <code>span</code> element, you'll log a message to the console (<kbd>F12</kbd>), and move it to inside the following <code>div</code> element. <em>It will still trigger the message</em>.</p>
<span id="demo">This is the <code>span</code></span>
<div id="recipient"></div>
```

`cloneNode()`, or `clone()`, is only required if you need to, for whatever reason, duplicate the node.

References:

* [`EventTarget.addEventListener()`](https://developer.mozilla.org/en/docs/Web/API/EventTarget.addEventListener).
* [`Node.appendChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild).
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;

```