[英]How to move an element from one place to another in the DOM using plain JavaScript?
I know how to do it in jQUery (untested but should work): 我知道如何在jQUery中执行它(未经测试但应该工作):
$('#foo').html().appendTo('#bar');
$('#foo').remove();
But how to do this in plain JS? 但是如何在普通的JS中做到这一点?
Your jQuery code can be done like this in plain javascript: 您的jQuery代码可以在普通的javascript中完成:
var foo = document.getElementById("foo"),
bar = document.getElementById("bar");
bar.innerHTML = foo.innerHTML;
foo.parentNode.removeChild(foo);
But this just copies the html code inside foo
to bar
as a string, then removes foo
from the DOM. 但这只是将
foo
的html代码复制到bar
作为字符串,然后从DOM中删除foo
。
Moving the nodes is also possible, like this: 移动节点也是可能的,如下所示:
var foo = document.getElementById("foo"),
bar = document.getElementById("bar");
bar.innerHTML = "";
for (var node in foo.childNodes) {
bar.appendChild(node);
}
foo.parentNode.removeChild(foo);
This will move the actual child nodes of foo
to bar
, and then remove the now empty foo
. 这会将
foo
的实际子节点移动到bar
,然后删除现在为空的foo
。
Creating an element 创建一个元素
<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>
Removing an element ( you must know the parent) 删除元素(您必须知道父元素)
<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>
Brought to you by http://www.w3schools.com/js/js_htmldom_elements.asp 由http://www.w3schools.com/js/js_htmldom_elements.asp带给您
At its simplest, there's this possibility: 最简单的是,有这种可能性:
var foo = document.getElementById('foo');
document.getElementById('bar').innerHTML = foo.innerHTML;
foo.parentNode.removeChild(foo);
And, using a function to minimise repetition: 并且,使用函数来最小化重复:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.