DOM-添加元素、节点
生活随笔
收集整理的這篇文章主要介紹了
DOM-添加元素、节点
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
createElement()方法能夠根據參數指定的標簽名稱創建一個新元素，并返回新建元素的引用，用法如下
var element=document.createElement("tagName");
其中element表示新建元素的引用，createElement()是document對象的一個方法，該方法只有一個參數，用來指定創建元素的標簽名稱。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head> <body><p id="attr" class="ff">世界之大，無奇不有</p> <ul></ul> <script> var element=document.createElement("p"); var b=element.nodeName; var v=element.nodeType; document.body.appendChild(element); //添加到body 子節點下 element.innerHTML="我也想去看看"; //給元素加上內容 alert(b+v);</script> </body> </html>使用createElement()方法創建的新元素不會被自動添加到文檔中，因為新元素還沒有nodeParent屬性，僅在javascript上下文中有效，如果要把這個元素添加到文檔中，還需要使用appendChild()、insertBefore()或replaceChild()方法實現。
復制節點
cloneNode()方法可以創建一個節點的副本，其用法如下
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head> <body><p id="attr" class="ff">世界之大，無奇不有</p> <ul></ul> <script>var p=document.createElement("p"); //創建p元素var h1=document.createElement("h1"); //創建h1元素var txt=document.createTextNode("你好，世界"); //創建文本節點var hello=txt.cloneNode(false); //復制創建的文本節點p.appendChild(hello); //把復制的文本節點添加到段落中h1.appendChild(p); //把段落節點增加到h1標題中document.body.appendChild(h1); //把標題節點增加到body中 </script> </body> </html>
由于賦值節點會包含節點的所有特性，如果原節點中包含ID屬性，就會出現id屬性重疊情況，一般情況下，在同一個文檔中，不同呀U尿素的id屬性值應該不同，為了避免
潛在沖突，應修改其中某個節點id屬性值。
插入節點
1.appendChild()方法
appendChild()方法可向當前節點的子節點列表的末尾添加新的子節點，用法如下
appendChild(newChild)；
參數newchild表示新添加的節點對象，并返回新節點。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head> <body><p id="attr" class="ff">世界之大，無奇不有</p> <ul></ul> <script> var p=document.createElement("p"); //創建段落元素 var txt=document.createTextNode("你好世界，世界你好"); //創建文本節點 p.appendChild(txt); //把文本節點添加到段落節點中 document.body.appendChild(p); //把段落節點添加到body節點的末尾處 </script> </body> </html>
?
2.insertBefore()方法
可在已有的子節點前插入一個新的子節點，用法如下
insertBefore(newchild，refchild)；
其中參數newchiild表示插入新的節點，refchild表示在此節點前插入新的子節點，返回新的子節點
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head> <body><p id="attr" class="ff">世界之大，無奇不有</p> <ul></ul> <script> var p0=document.getElementById("attr"); var p=document.createElement("p"); //創建段落元素 var txt=document.createTextNode("你好世界，世界你好"); //創建文本節點 p.appendChild(txt); //把文本節點添加到段落節點中 document.body.insertBefore(p,p0); //添加段落p在p0前面 </script> </body> </html>刪除節點
removeChild()方法可以從子節點列表中刪除某個節點，用法如下
nodeObject.removeChild(node)；
其中參數node為要刪除的節點，如果刪除成功，則返回被刪除的節點，如果失敗，則返回null，方使用removeChild()方法刪除節點時，該節點所包含的所有子節點將同時被刪除
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head> <body><p id="attr" class="ff">世界之大，無奇不有</p> <ul></ul> <script> var p=document.getElementById("attr"); //獲取段落節點 document.body.removeChild(p); //從body中刪除段落節點和所有的子節點 </script> </body> </html>替換節點
replaceChild()方法可以將某個子節點替換為另一個。用法如下：
?
?
?
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/xiaowie/p/10606970.html
總結
以上是生活随笔為你收集整理的DOM-添加元素、节点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Action中五个常量解释,(succe
- 下一篇： this 的指向