我想将一个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中的所有内容。
其他回答
appendChild正是这样做的——基本上是剪切粘贴。
它将移动选定的元素及其所有子节点。
如果要放置元素的div中包含内容,并且希望元素显示在主要内容之后:
$("#destination").append($("#source"));
如果要放置元素的div中包含内容,并且希望在主要内容之前显示元素:
$("#destination").prepend($("#source"));
如果要放置元素的div为空,或者要完全替换它:
$("#element").html('<div id="source">...</div>');
如果要在上述任一项之前复制元素:
$("#destination").append($("#source").clone());
// etc.
使用普通JavaScript解决方案:
// Declare a fragment:
var fragment = document.createDocumentFragment();
// Append desired element to the fragment:
fragment.appendChild(document.getElementById('source'));
// Append fragment to desired element:
document.getElementById('destination').appendChild(fragment);
过来看。
我需要将内容从一个容器移动到另一个容器,包括所有事件侦听器。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*并将其放入目标,包括其事件侦听器:Node.appendChild()(MDN)
您可以使用纯JavaScript,使用appendChild()方法。。。
appendChild()方法将节点附加为节点的最后一个子节点。提示:如果你想用文本创建一个新段落,请记住将文本创建为附加到段落的文本节点,然后将段落附加到文档中。也可以使用此方法将元素从一个元素移动到另一个提示:使用insertBefore()方法在指定的、现有的、子节点。
所以你可以这样做来完成这项工作,这是我为你创建的,使用appendChild(),运行并查看它如何适用于你的案例:
函数appendIt(){var source=document.getElementById(“源”);document.getElementById(“目标”).appendChild(源);}#来源{颜色:白色;背景:绿色;填充:4px 8px;}#目的地{颜色:白色;背景:红色;填充:4px 8px;}按钮{页边空白:20px;}<div id=“source”><p>来源</p></div><div id=“destination”><p>目的地</p></div><button onclick=“appendIt()”>移动元素</button>