![](/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.