no1、創建一個新的元素節點，並把它添加到body中
1 window.onload = t; 2 function t(){ 3 var nodeli = document.createElement('li'); 4 document.body.appendChild(nodeli); 5 nodeli.style.cssText = 'width:300px;background:red;'; 6 }
上面的顯示效果為：
no2、創建一個元素節點，創建一個文本節點，將文本節點追加到元素節點上，再將元素節點追加到body中。
window.onload = t; function t(){ var nodeli = document.createElement('li');//創建一個li節點 var li_text = document.createTextNode('文本節點');//創建一個文本節點 nodeli.appendChild(li_text);//將文本節點追加到li節點上 document.body.appendChild(nodeli); //將元素節點追加到body中 nodeli.style.cssText = 'width:300px;background:red;'; //設置元素節點的樣式 }
no3、在指定位置插入節點insertBefore(參數1，參數2)：
第一個參數為要插入的心節點，第二個參數為已有的節點，就是插在誰的節點的前面。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 <script> 7 function t(){ 8 var nodeli = document.createElement('li'); //創建一個li節點 9 var li_text = document.createTextNode('文本節點'); //創建一個文本節點 10 nodeli.appendChild(li_text); //將文本節點追加到li節點上 11 12 var nodeUl = document.getElementsByTagName('ul')[0]; //獲取第一個ul節點 13 var nodeli1 = nodeUl.getElementsByTagName('li')[2]; //這個表示永遠在第三個之前插入。不管后面增加了多少次，每次都是從新的第三個開始插入。第一次是在秋天前插入，之后的都是最新的第三個節點前插入 14 nodeUl.insertBefore(nodeli,nodeli1); //函數insertBefore()表示在哪個節點之前添加。第一個參數為要插入的新節點，第二個參數為已有節點。 15 } 16 </script> 17 </head> 18 19 <body> 20 <ul> 21 <li>春天</li> 22 <li>夏天</li> 23 <li>秋天</li> 24 <li>冬天</li> 25 </ul> 26 <hr /> 27 <button onclick="t()">在指定位置增加節點</button> 28 </body> 29 </html>
顯示效果為：
