我想将一个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>
当前回答
我的解决方案:
移动:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
副本:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
注意.detach()的用法。复制时,请注意不要复制ID。
其他回答
您也可以尝试:
$("#destination").html($("#source"))
但这将完全覆盖#destination中的所有内容。
您可以使用:
为了在后面插入,
jQuery("#source").insertAfter("#destination");
为了插入另一元件内部,
jQuery("#source").appendTo("#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>
appendChild正是这样做的——基本上是剪切粘贴。
它将移动选定的元素及其所有子节点。
您可以使用以下代码将源移动到目标:
jQuery("#source")
.detach()
.appendTo('#destination');
尝试使用CodePen。
函数move(){jQuery(“#source”).detch().appendTo(“#destination”);}#来源{背景色:红色;颜色:#ffffff;显示:内联块;填充:35px;}#目的地{背景色:蓝色;颜色:#ffffff;显示:内联块;填充:50px;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“source”>我是消息源</div><div id=“destination”>我是目的地</div><button onclick=“move();”>移动</button>