![](/img/trans.png)
[英]Move an element one place up or down in the dom tree with javascript
[英]How to move an element from one place to another in the DOM using plain JavaScript?
我知道如何在jQUery中执行它(未经测试但应该工作):
$('#foo').html().appendTo('#bar');
$('#foo').remove();
但是如何在普通的JS中做到这一点?
field = document.getElementById('e');
document.getElementById('x').innerHTML = field.parentNode.innerHTML;
field.parentNode.removeChild(field);
这是一个解决方案,你也可以搜索clonenode 。
您的jQuery代码可以在普通的javascript中完成:
var foo = document.getElementById("foo"),
bar = document.getElementById("bar");
bar.innerHTML = foo.innerHTML;
foo.parentNode.removeChild(foo);
但这只是将foo
的html代码复制到bar
作为字符串,然后从DOM中删除foo
。
移动节点也是可能的,如下所示:
var foo = document.getElementById("foo"),
bar = document.getElementById("bar");
bar.innerHTML = "";
for (var node in foo.childNodes) {
bar.appendChild(node);
}
foo.parentNode.removeChild(foo);
这会将foo
的实际子节点移动到bar
,然后删除现在为空的foo
。
创建一个元素
<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 foo = document.getElementById('foo');
document.getElementById('bar').innerHTML = foo.innerHTML;
foo.parentNode.removeChild(foo);
JS小提琴演示 。
并且,使用函数来最小化重复:
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);
JS小提琴演示 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.