var foo = document.getElementById("foo"),
bar = document.getElementById("bar");
bar.innerHTML = "";
for (var node in foo.childNodes) {
bar.appendChild(node);
}
foo.parentNode.removeChild(foo);
function moveTo(source,target){
if (!source || !target) {
return false;
}
else {
var children = source.childNodes;
while (children.length){
target.appendChild(children[0]);
}
source.parentNode.removeChild(source);
}
}
var bar = document.getElementById('bar'),
foo = document.getElementById('foo');
moveTo(foo, bar);
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除一个元素(必须知道父元素)
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
var move_me = document.getElementById("to_move"),
new_parent = document.getElementById("new_parent");
// the magic. appendChild moves elements
new_parent.appendChild(move_me);
5条答案
按热度按时间ssgvzors1#
这是一个解决方案,你也可以搜索clonenode。
smdnsysy2#
你的jQuery代码可以在纯javascript中这样做:
但这只是将
foo
中的html代码作为字符串复制到bar
,然后从DOM中删除foo
。也可以移动节点,如下所示:
这将把
foo
的实际子节点移动到bar
,然后删除现在为空的foo
。z6psavjg3#
最简单的,有这样一种可能性:
JS Fiddle demo。
然后,使用一个函数来最小化重复:
JS Fiddle demo。
snz8szmq4#
创建元素
删除一个元素(必须知道父元素)
由http://www.w3schools.com/js/js_htmldom_elements.asp提供
dgsult0t5#
您可以将现有节点附加到另一个节点,从而将其移动到新位置:
另请参阅MDN。不会变得更简单。请注意,这将保留事件侦听器和其他东西,通常是期望的结果,但如果您不再需要它们,请记住。并且可能比所有
.innerHTML
解决方案更有效。