Move an element to another div without losing events, listeners, etc. (Without jQuery)

Question

Simply put, I'm trying to move a submenu from one place to another. (Easy) I need to do this without losing 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 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 will be fine.

Answer 1

A simpler jQuery answer is simply $('#element_to_move').appendTo('#PARENT_at_destination');

jQuery cuts it from its current location and moves it to a new location without losing binding, etc. However, styles may be affected as the location of the DOM changes.

: https://api.jquery.com/detach/

Answer 2

JavaScript clone() node, , , , , :

// 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);

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);

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

<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>

Hide result

cloneNode() clone(), , - node.

:

• EventTarget.addEventListener().
• Node.appendChild().

Answer 3

:
- cloneNode(true|false) removeChild()
- replaceChild()

?

EDIT: , : yahoo menubar . , . ( , , )

, Chrome. ( , Firebug Firefox)

• Google Chrome https://de.yahoo.com/?p=us
• [ctrl.] + [shift] + [j], .
• [esc], dev.

:

var myNode=document.querySelector("#nav-col-holder");// the element you want to move
var newNode=myNode.cloneNode(true);//it complete clone with all the children node
var insertLocation=document.querySelector("#yui_3_8_1_1_1413153166615_364");//the location you want the clone to move to

, , . dir(insertLocation) . . 6- Node insertLocation

insertLocation.insertBefore(newNode, insertLocation.childNodes[5]);//the clone node is at the target position
myNode.parentNode.removeChild(myNode);//remove the original node

, .

, . Bye.

Answer 4

. :

  <ul id="menua">
      <li id="submenua">My Submenu with Clicky Events</li>
  </ul>
  <ul id="menub">
      <li id="submenub">My Submenu missing Clicky Events</li>
  </ul>

.js:

$( "#submenua" ).clone().prependTo( "#submenub" );
// If you want to move instead of clone, add this line:
$("#menua #submenua").remove();