Mar*_*man 1611 html javascript jquery
我想将一个DIV元素移到另一个元素中.例如,我想移动它(包括所有孩子):
<div id="source">
...
</div>
进入这个:
<div id="destination">
...
</div>
所以我有这个:
<div id="destination">
<div id="source">
...
</div>
</div>
And*_*are 1744
您可能想要使用该appendTo函数(添加到元素的末尾):
$("#source").appendTo("#destination");
或者,您可以使用该prependTo函数(添加到元素的开头):
$("#source").prependTo("#destination");
例:
$("#appendTo").click(function() {
$("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
$("#moveMeIntoMain").prependTo($("#main"));
});#main {
border: 2px solid blue;
min-height: 100px;
}
.moveMeIntoMain {
border: 1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>
<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>小智 869
我的解决方案
移动:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
复制:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
注意.detach()的用法.复制时,请注意不要复制ID.
kjc*_*ter 106
我刚用过:
$('#source').prependTo('#destination');
its*_*sme 93
如果div要放置元素的位置包含内容,并且您希望元素显示在主要内容之后:
$("#destination").append($("#source"));
如果div要放置元素的位置包含内容,并且要在主要内容之前显示元素:
$("#destination").prepend($("#source"));
如果div要放置元素的位置为空,或者您想要完全替换它:
$("#element").html('<div id="source">...</div>');
如果要在上述任何一个之前复制元素:
$("#destination").append($("#source").clone());
// etc.
Ali*_*sam 86
怎么样一个JavaScript的解决方案吗？
声明一个片段:
var fragment = document.createDocumentFragment();
将所需元素附加到片段:
fragment.appendChild(document.getElementById('source'));
将片段附加到所需元素:
document.getElementById('destination').appendChild(fragment);
小智 29
您可以使用:
要插入之后,
jQuery("#source").insertAfter("#destination");
要插入另一个元素,
jQuery("#source").appendTo("#destination");
Bek*_*caj 24
曾经尝试过简单的JavaScript ...... destination.appendChild(source);？
onclick = function(){ destination.appendChild(source); }div{ margin: .1em; }
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }<!DOCTYPE html>
<html>
<body>
<div id="destination">
###
</div>
<div id="source">
***
</div>
</body>
</html>小智 18
如果您想要快速演示以及有关如何移动元素的更多详细信息,请尝试以下链接:
http://html-tuts.com/move-div-in-another-div-with-jquery
这是一个简短的例子:
要移动一个元素:
$('.whatToMove').insertBefore('.whereToMove');
要移动一个元素:
$('.whatToMove').insertAfter('.whereToMove');
要在元素内移动,请在该容器内ABOVE ALL元素:
$('.whatToMove').prependTo('.whereToMove');
要在元素内移动,请在该容器内的所有元素之后:
$('.whatToMove').appendTo('.whereToMove');
Sub*_*axe 16
您可以使用以下代码将源移动到目标
jQuery("#source")
.detach()
.appendTo('#destination');
尝试工作codepen
function move() {
jQuery("#source")
.detach()
.appendTo('#destination');
}#source{
background-color:red;
color: #ffffff;
display:inline-block;
padding:35px;
}
#destination{
background-color:blue;
color: #ffffff;
display:inline-block;
padding:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>
<div id="destination">
I am destination
</div>
<button onclick="move();">Move</button>HMR*_*HMR 10
老问题但是到了这里因为我需要将内容从一个容器移动到另一个容器,包括所有事件监听器.
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
我注意到insertAfter&after或之间存在巨大的内存泄漏和性能差异insertBefore&before。如果你有大量的 DOM 元素，或者你需要使用after()或before()在MouseMove 事件中，浏览器内存可能会增加，接下来的操作会运行得很慢。
我刚刚遇到的解决方案是使用 inserBeforebefore()和 insertAfter 代替after()。
Bekim Bacaj 答案的脏尺寸改进：
div { border: 1px solid ; margin: 5px }<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>您也可以尝试:
$("#destination").html($("#source"))
但这将完全覆盖你所拥有的任何东西#destination.
您可以使用纯 JavaScript，使用appendChild()方法...
appendChild() 方法附加一个节点作为节点的最后一个子节点。
提示：如果要创建带有文本的新段落，请记住将文本创建为附加到段落的文本节点，然后将段落附加到文档。
您还可以使用此方法将元素从一个元素移动到另一个元素。
提示：使用 insertBefore() 方法在指定的现有子节点之前插入新的子节点。
所以你可以这样做来完成这项工作，这是我为你创建的，使用appendChild()，运行并查看它如何适用于你的情况：
function appendIt() {
var source = document.getElementById("source");
document.getElementById("destination").appendChild(source);
}#source {
color: white;
background: green;
padding: 4px 8px;
}
#destination {
color: white;
background: red;
padding: 4px 8px;
}
button {
margin-top: 20px;
}<div id="source">
<p>Source</p>
</div>
<div id="destination">
<p>Destination</p>
</div>
<button onclick="appendIt()">Move Element</button>| 归档时间： |
|
| 查看次数： |
1052592 次 |
| 最近记录： |