Dom createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment() //創建新節點 function CreatNode() { var oP = document.createElement("p"); oP.innerHTML = "<font style='color:red;'>Hello World!</font>"; document.body.appendChild(oP); }
//刪除節點 function RemoveNode() { var oP = document.getElementsByTagName("p"); var len = oP.length; if (len != 0) { oP[len - 1].parentNode.removeChild(oP[len - 1]); //這里最好使用節點的parentNode特性來刪除 } else { alert("已經全部刪除!"); } } //替換節點 function ReplaceNode() { var oNewP = document.createElement("p"); oNewP.innerHTML = "<font style='color:red;'>New --> Hello World!</font>"; //將最后一個新增的節點替換成oNewP var len = document.getElementsByTagName("p").length; var oOldLastP = document.getElementsByTagName("p")[len - 1]; oOldLastP.parentNode.replaceChild(oNewP, oOldLastP); } //insertBefore()方法 讓新消息出現在舊消息之前,接受兩個參數: 1.要添加的節點;2.插在哪個節點之前 xxx.parentNode.insertBefore(newChild, oldChild); //createDocumentFragment()方法 創建文檔碎片 可以把一些創建的十個新的節點元素都添加到文檔碎片中,然后這個碎片作為參數傳遞給要添加碎片的appendChild() xxx.appendChild(oFragment); 這樣xxx只調用了一次來代替調用十次,提高性能。