我想将一个DIV元素移动到另一个元素中。例如,我想移动此(包括所有子对象):
<div id="source">
...
</div>
在这方面:
<div id="destination">
...
</div>
所以我有这个:
<div id="destination">
<div id="source">
...
</div>
</div>
我想将一个DIV元素移动到另一个元素中。例如,我想移动此(包括所有子对象):
<div id="source">
...
</div>
在这方面:
<div id="destination">
...
</div>
所以我有这个:
<div id="destination">
<div id="source">
...
</div>
</div>
当前回答
您也可以尝试:
$("#destination").html($("#source"))
但这将完全覆盖#destination中的所有内容。
其他回答
尝试纯JavaScript:destination.appendChild(源代码);。
onclick=function(){destination.appendChild(源)};第二部分{边距:.1em;}#目的地{边框:实心1px红色;}#来源{边框:实心1px灰色;}<div id=destination>###</div><div id=源>***</div>
如果要放置元素的div中包含内容,并且希望元素显示在主要内容之后:
$("#destination").append($("#source"));
如果要放置元素的div中包含内容,并且希望在主要内容之前显示元素:
$("#destination").prepend($("#source"));
如果要放置元素的div为空,或者要完全替换它:
$("#element").html('<div id="source">...</div>');
如果要在上述任一项之前复制元素:
$("#destination").append($("#source").clone());
// etc.
我刚刚使用了:
$('#source').prependTo('#destination');
我从这里抓起的。
您可能需要使用appendTo函数(它将添加到元素的末尾):
$("#source").appendTo("#destination");
或者,您可以使用prependTo函数(添加到元素的开头):
$("#source").prependTo("#destination");
例子:
$(“#appendTo”).click(function(){$(“#moveMeIntoMain”).appendTo($(“#main”));});$(“#prependTo”).click(function(){$(“#moveMeIntoMain”).prependTo($(“#main”));});#主要的,主要的{边框:2px纯蓝色;最小高度:100px;}.moveMeIntoMain{边框:1px纯红色;}<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”>将我移动到main</div><button id=“appendTo”>appendTo main</button><button id=“prependTo”>prependTo main</button>
我注意到insertAfter&after或insertBefore&before之间存在巨大的内存泄漏和性能差异。。如果您有大量的DOM元素,或者需要在MouseMove事件中使用after()或before(),那么浏览器内存可能会增加,接下来的操作将非常缓慢。
我刚刚经历的解决方案是使用inserBefore代替before(),并使用insertAfter代替after()。