关于javascript：如何将一个元素移动到另一个元素中？


How to move an element into another element?

我想将一个DIV元素移动到另一个DIV元素中。例如，我要移动此项(包括所有子项)：

1
...

进入这个：

1
...

所以我有了这个：

1
    ...
相关讨论

您可能需要使用appendTo函数(添加到元素末尾)：

1
$("#source").appendTo("#destination");

或者，您可以使用prependTo函数(添加到元素的开头)：

1
$("#source").prependTo("#destination");

例子：

1
2
3
4
5
6
$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});
1
2
3
4
5
6
7
8
#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}
1
2
3
4
5
6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
main
move me to main

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>

相关讨论

我的解决方案：

移动：

1
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

复印件：

1
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

注意.detach()的用法。复制时，请注意不要复制ID。

相关讨论

我刚用过：

1
$('#source').prependTo('#destination');

我从这里抓到的。

相关讨论

如果要放置元素的div中包含内容，并且希望元素显示在主要内容之后：

1
  $("#destination").append($("#source"));

如果要放置元素的div中包含内容，并且要在主要内容之前显示元素：

1
$("#destination").prepend($("#source"));

如果要放置元素的div是空的，或者要完全替换它：

1
$("#element").html('...');

如果要在上述任何一项之前复制元素：

1
2
$("#destination").append($("#source").clone());
// etc.
相关讨论

JavaScript解决方案怎么样？

声明片段：

var fragment = document.createDocumentFragment();

将所需元素附加到片段：

fragment.appendChild(document.getElementById('source'));

将片段附加到所需元素：

document.getElementById('destination').appendChild(fragment);

过来看。

相关讨论

你可以使用：

在后面插入，

1
jQuery("#source").insertAfter("#destination");

要插入到另一个元素中，

1
jQuery("#source").appendTo("#destination");

曾经尝试过简单的javascript…EDOCX1？9？

1
onclick = function(){ destination.appendChild(source); }
1
2
3
div{ margin: .1em; }
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>

 <body>

 
   ###
 
 
   ***
 

 </body>
</html>

相关讨论

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

Move Div in Another Div with jQuery

下面是一个简短的例子：

要在元素上方移动：

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

在元素之后移动：

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

要在某个元素内移动，请执行以下操作：首先在该容器内的所有元素内移动：

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

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

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

可以使用以下代码将源移动到目标

1
2
3
 jQuery("#source")
       .detach()
       .appendTo('#destination');

尝试工作代码笔

1
2
3
4
5
function move() {
 jQuery("#source")
   .detach()
   .appendTo('#destination');
}
1
2
3
4
5
6
7
8
9
10
11
12
#source{
  background-color:red;
  color: #ffffff;
  display:inline-block;
  padding:35px;
}
#destination{
  background-color:blue;
  color: #ffffff;
  display:inline-block;
  padding:50px;
}
1
2
3
4
5
6
7
8
9
10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

I am source



I am destination


<button onclick="move();">Move</button>

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

jquery没有办法做到这一点，但标准的dom函数appendchild做到了。

1
2
3
//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

您也可以尝试：

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

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

相关讨论

我注意到前后插入或前后插入之间存在巨大的内存泄漏和性能差异。如果您有大量的DOM元素，或者需要在mousemove事件中使用after()或before()，则浏览器内存可能会增加，下一个操作将运行得非常慢。我刚刚经历的解决方案是在()之前使用insertbefore，在()之后使用insertafter。

相关讨论

您可以使用纯javascript，使用appendChild()方法…

The appendChild() method appends a node as the last child of a node.

Tip: If you want to create a new paragraph, with text, remember to
create the text as a Text node which you append to the paragraph, then
append the paragraph to the document.

You can also use this method to move an element from one element to
another.

Tip: Use the insertBefore() method to insert a new child node before a
specified, existing, child node.

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

1
2
3
4
function appendIt() {
  var source = document.getElementById("source");
  document.getElementById("destination").appendChild(source);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#source {
  color: white;
  background: green;
  padding: 4px 8px;
}

#destination {
  color: white;
  background: red;
  padding: 4px 8px;
}

button {
  margin-top: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
  <p>
Source
</p>



  <p>
Destination
</p>


<button onclick="appendIt()">Move Element</button>

为了完整起见，本文中还提到了另一种方法wrap()或wrapAll()。所以OP的问题可以通过这个来解决(也就是说，假设还不存在，下面的方法将从头开始创建这样一个包装器——OP不清楚包装器是否已经存在)：

1
2
3
$("#source").wrap('')
// or
$(".source").wrapAll('')

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

")时：

1
2
    <label>Name</label>
    <input ...>

它正确地包装了那些...和...，但不知何故遗漏了。所以我最终使用了明确的$("row1").append("#a_predefined_fieldset")。所以，YMMV。