我想将一个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>
当前回答
为了完整起见,本文中提到了另一种方法wrap()或wrapAll()。因此,OP的问题可以通过以下方式解决(即,假设<div id=“destination”/>还不存在,以下方法将从头创建这样的包装器-OP不清楚包装器是否已经存在):
$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')
听起来很有希望。然而,当我试图对多个嵌套结构执行$(“[id^=row]”).wrapAll(“<fieldset></fieldset>”)时,如下所示:
<div id="row1">
<label>Name</label>
<input ...>
</div>
它正确地包装了那些<div></div>和<input></input>但是有人把<label></标签>。所以我最终使用了显式的$(“row1”).append(“#a_predefined_fieldset”)。所以,YMMV。
其他回答
如果您想要快速演示并了解有关如何移动元素的更多详细信息,请尝试以下链接:
http://html-tuts.com/move-div-in-another-div-with-jquery
下面是一个简短的示例:
要在元素上方移动:
$('.whatToMove').insertBefore('.whereToMove');
要在元素后移动,请执行以下操作:
$('.whatToMove').insertAfter('.whereToMove');
要在元素内移动,请在该容器内的所有元素上方:
$('.whatToMove').prependTo('.whereToMove');
要在元素内移动,请在该容器内的所有元素之后:
$('.whatToMove').appendTo('.whereToMove');
您可能需要使用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>
您可以使用纯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>
我刚刚使用了:
$('#source').prependTo('#destination');
我从这里抓起的。
使用普通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);
过来看。