插入節點appendChild()
在指定節點的最后一個子節點列表之后添加一個新的子節點。
語法:
appendChild(newnode) //參數: //newnode：指定追加的節點。
為ul添加一個li，設置li內容為PHP，代碼如下:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 </head> 7 <body> 8 <ul id="test"> 9 <li>JavaScript</li> 10 <li>HTML</li> 11 </ul> 12 <script type="text/javascript"> 13 var otest = document.getElementById("test"); 14 var newnode = document.createElement("li"); 15 newnode.innerHTML = "PHP"; 16 otest.appendChild(newnode); 17 </script> 18 </body> 19 </html>
運行結果:
JavaScript
HTML
PHP
插入節點insertBefore()
insertBefore() 方法可在已有的子節點前插入一個新的子節點。
語法:
insertBefore(newnode,node); //參數: //newnode: 要插入的新節點。 //node: 指定此節點前插入節點。
下面代碼在指定節點前插入節點:
運行結果:
This is a new p JavaScript HTML
otest.insertBefore(newnode,node); 也可以改為: otest.insertBefore(newnode,otest.childNodes[0]);
刪除節點removeChild()
removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node) //參數: //node ：必需，指定需要刪除的節點。
刪除子點:
運行結果:
HTML
刪除節點的內容: javascript
把刪除的子節點賦值給 x，這個子節點不在DOM樹中，但是還存在內存中，可通過 x 操作。
如果要完全刪除對象，給 x 賦 null 值，代碼如下:
例：定義clearText()函數，完成節點內容的刪除
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 </head> 7 <body> 8 <div id="content"> 9 <h1>html</h1> 10 <h1>php</h1> 11 <h1>javascript</h1> 12 <h1>jquery</h1> 13 <h1>java</h1> 14 </div> 15 16 <script type="text/javascript"> 17 function clearText() { 18 var content=document.getElementById("content"); 19 for(var i=content.childNodes.length-1;i>=0;i--){ 20 var childNode = content.childNodes[i]; 21 content.removeChild(childNode); 22 } 23 } 24 </script> 25 26 <button onclick="clearText()">清除節點內容</button> 27 </body> 28 </html>
替換元素節點replaceChild()
語法：
node.replaceChild (newnode,oldnew ) //參數： //newnode : 必需，用於替換 oldnew 的對象。 //oldnew : 必需，被 newnode 替換的對象。
將 b 標簽替換成 i 標簽:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 </head> 7 <body> 8 <div><b id="oldnode">JavaScript</b>是一個很常用的技術，為網頁添加動態效果。</div> 9 <a href="javascript:replaceMessage()"> 將加粗改為斜體</a> 10 11 <script type="text/javascript"> 12 function replaceMessage(){ 13 var oldnode = document.getElementById("oldnode"); 14 var oldHTML = oldnode.innerHTML; 15 var newnode = document.createElement("i"); 16 oldnode.parentNode.replaceChild(newnode,oldnode); 17 newnode.innerHTML = oldHTML; 18 } 19 </script> 20 </body> 21 </html>
1. 當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。
2. newnode 必須先被建立。
創建元素節點createElement
createElement()方法可創建元素節點。此方法可返回一個 Element 對象。
語法：
document.createElement(tagName) //參數: //tagName：字符串值，這個字符串用來指明創建元素的類型。
要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。
創建一個按鈕，代碼如下：
1 var body = document.body; 2 var input = document.createElement("input"); 3 input.type = "button"; 4 input.value = "創建一個按鈕"; 5 body.appendChild(input);
使用setAttribute來設置屬性，代碼如下：
1 <script type="text/javascript"> 2 var body= document.body; 3 var btn = document.createElement("input"); 4 btn.setAttribute("type", "text"); 5 btn.setAttribute("name", "q"); 6 btn.setAttribute("value", "使用setAttribute"); 7 btn.setAttribute("onclick", "javascript:alert('This is a text!');"); 8 body.appendChild(btn); 9 </script>
效果：在HTML文檔中，創建一個文本框，使用setAttribute設置屬性值。 當點擊這個文本框時，會彈出對話框“This is a text!”。
例：添加鏈接地址、文本、文字顏色屬性。調用createa函數
1 <script type="text/javascript"> 2 var main = document.body; 3 //創建鏈接 4 function createa(url,text){ 5 var a = document.createElement("a"); 6 a.href = url; 7 a.innerHTML = text; 8 a.style.color = "red"; 9 main.appendChild(a); 10 } 11 // 調用函數創建鏈接 12 createa("http://www.immooc.com/","慕課網"); 13 </script>
創建文本節點createTextNode
createTextNode() 方法創建新的文本節點，返回新創建的 Text 節點。
語法：
document.createTextNode(data) //參數： //data : 字符串值，可規定此節點的文本。
創建一個P標簽，設置className屬性，使用createTextNode創建文本節點"I love JavaScript!":
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 <style type="text/css"> 7 .message{ 8 width:200px; 9 height:100px; 10 } 11 </style> 12 </head> 13 <body> 14 <script type="text/javascript"> 15 var element = document.createElement("p"); 16 element.className = "message"; 17 var textnode = document.createTextNode("I love JavaScript!"); 18 element.appendChild(textnode); 19 document.body.appendChild(element); 20 </script> 21 </body> 22 </html>