javascript 将元素移动到另一个 div 而不丢失事件、侦听器等（没有 jQuery）

Move Element to another div without losing events, listeners, etc (without jQuery)

提问by Saahir Foux

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.

理想情况下，我可以在不使用 jQuery 的情况下找到解决方案，但是如果您有一个可以使用它的解决方案，那就没问题了。

回答by cssyphus

With jQuery you can use .appendTo()

使用 jQuery，您可以使用.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.

jQuery 会将其从当前位置剪切并移动到新位置，而不会丢失绑定等。但是，样式可能会受到影响，因为 DOM 位置会发生变化。

This could also be helpful: https://api.jquery.com/detach/

这也可能有帮助：https: //api.jquery.com/detach/

回答by David says reinstate Monica

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:

使用 JavaScript，您不必clone()移动到要移动的节点，只需获取对它的引用，然后将其插入到您想要的任何位置，例如：

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

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

cloneNode(), 或clone(), 仅当您出于任何原因需要复制节点时才需要。

References:

参考：

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

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

回答by thadeuszlay

Have you tried it with either:
- cloneNode(true|false)and removeChild()or
- replaceChild()

您是否尝试过：
-cloneNode(true|false)和removeChild()或
-replaceChild()

yet?

然而？

EDIT: Here the example you asked for: I'll move the yahoo's menubar on the left hand side to the center. The moved menubar will have all the functionalities that it has before. (I hope that's the example you're expecting)

编辑：这里是您要求的示例：我将左侧的雅虎菜单栏移动到中心。移动的菜单栏将具有它以前的所有功能。（我希望这是你期待的例子）

To make it more clear I'll use the Chrome developer tools. (the code works the same as in Firebug with Firefox)

为了更清楚，我将使用 Chrome 开发人员工具。（代码的工作方式与使用 Firefox 的 Firebug 相同）

1. Use the browser Google Chrome and go to https://de.yahoo.com/?p=us
2. [ctrl.]+[shift]+[j] in order to open developer tools.
3. [esc] in order to open the console in the dev tools.

1. 使用浏览器 Google Chrome 并转到https://de.yahoo.com/?p=us
2. [ctrl.]+[shift]+[j] 以打开开发者工具。
3. [esc] 以便在开发工具中打开控制台。

type in the console the following things:

在控制台中输入以下内容：

var myNode=document.querySelector("#nav-col-holder");// the element you want to move
var newNode=myNode.cloneNode(true);//it's 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

Analyse where exactly you want the clone to remove to. Use dir(insertLocation)to get the exact target position. In this ex. I'll just put it before the 6th childNode of insertLocation

分析您希望将克隆删除到的确切位置。使用dir(insertLocation)得到确切的目标位置。在这个前。我会把它放在 insertLocation 的第 6 个 childNode 之前

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

Now, you should see that I have just moved the menubar at the left hand side to the center of the page without loosing any functionalities of this menubar.

现在，您应该看到我刚刚将左侧的菜单栏移到了页面的中心，而没有失去此菜单栏的任何功能。

Hope I could help out. Bye.

希望我能帮上忙。再见。

回答by Héctor

You are using id twice. Try this:

您正在使用 id 两次。试试这个：

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

And .js:

和.js：

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