如何将一个元素移动到另一个元素中？

如果您想要快速演示以及有关如何移动元素的更多详细信息，请尝试以下链接：

http://html-tuts.com/move-div-in-another-div-with-jquery

这是一个简短的例子：

要在元素上方移动：

$('.whatToMove').insertBefore('.whereToMove');

在元素之后移动：

$('.whatToMove').insertAfter('.whereToMove');

要在元素内移动，请在该容器内的所有元素之上：

$('.whatToMove').prependTo('.whereToMove');

要在元素内移动，请在该容器内的所有元素之后：

$('.whatToMove').appendTo('.whereToMove');

---

老问题，但在这里，因为我需要将内容从一个容器移动到另一个容器，包括所有事件侦听器。

jQuery 没有办法做到这一点，但标准 DOM 函数 appendChild 可以。

//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

使用 appendChild 删除 .source 并将其放入目标中，包括它的事件侦听器：https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

---

您也可以尝试：

$("#destination").html($("#source"))

但这将完全覆盖您在 #destination 中的所有内容。

---

您可以使用纯 JavaScript，使用 appendChild() 方法...

appendChild() 方法附加一个节点作为节点的最后一个子节点。提示：如果要创建带有文本的新段落，请记住将文本创建为附加到段落的文本节点，然后将段落附加到文档。您还可以使用此方法将元素从一个元素移动到另一个元素。提示：使用 insertBefore() 方法在指定的现有子节点之前插入新的子节点。

因此，您可以这样做来完成这项工作，这是我为您创建的，使用 appendChild()，运行并查看它如何适用于您的案例：

函数 appendIt() { var source = document.getElementById("source"); document.getElementById("destination").appendChild(source); } #source { 颜色：白色；背景：绿色；填充：4px 8px； } #destination { 颜色：白色；背景：红色；填充：4px 8px； } 按钮 { 边距顶部：20px; }

移动元素

---

我注意到巨大的内存泄漏和insertAfter & 之间的性能差异after 或 insertBefore & before .. 如果您有大量 DOM 元素，或者您需要在 MouseMove 事件 中使用 after() 或 before()，浏览器内存可能会增加，并且下一个操作会运行得很慢.

我刚刚体验的解决方案是使用inserBefore 代替before() 和inserAfter 代替after()。

---

Bekim Bacaj answer 的脏大小改进

div {边框：1px 实心；边距：5px }

---

为了完整起见，在this article中提到了另一种方法wrap()或wrapAll()。因此，OP 的问题可能由此解决（即，假设 <div id="destination" /> 尚不存在，以下方法将从头开始创建这样的包装器 - OP 不清楚包装器是否已经存在）：

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

听起来很有希望。但是，当我尝试在这样的多个嵌套结构上执行 $("[id^=row]").wrapAll("<fieldset></fieldset>") 时：

<div id="row1">
    <label>Name</label>
    <input ...>
</div>

它正确地包装了那些 <div>...</div> 和 <input>...</input> 但不知何故遗漏了 <label>...</label>。所以我最终改用显式 $("row1").append("#a_predefined_fieldset") 。所以，YMMV。

---