上節中,我們講解如何建立新節點。建立的新節點如果想發揮作用,則必需加入到DOM(HTML文件)。
Javascript提供了兩種新增節點的方法:
#insertBefore()
insertBefore() 方法可以在指定節點的前面插入新節點。
語法:
parentNode.insertBefore(newNode , thisNode)
參數/傳回值說明:
#例如,在id="dome" 的節點前面新增節點的語句為:
var ele_div=document.createElement("div"); var thisNode=document.getElementById("demo"); this.parentNode.insertBefore(ele_div , thisNode);
#注意:insertBefore() 是目前節點的父節點的一個方法,新增節點時,不但要知道目前節點,還要知道當前節點的父節點。一般情況下,可以透過 thisNode.parentNode 來取得父節點。
舉例,在指定節點前面不斷增加新節點:
<div id="demo"> <div id="thisNode">点击这里添加新节点</div> </div> <script type="text/javascript"> document.getElementById("thisNode").onclick=function(){ var ele_div=document.createElement("div"); var ele_text=document.createTextNode("这是新节点"); ele_div.appendChild(ele_text); this.parentNode.insertBefore(ele_div , this); } </script>
appendChild()
appendChild() 可以向指定節點新增新的子節點,並將新增的節點放在最後。
語法:
parentNode.appendChild(newNode)
參數/傳回值說明:
例如,向id="dome" 的節點加入子節點的語句為:
var ele_div=document.createElement("div"); var ele_parent=document.getElementById("demo"); ele_parent.appendChild(ele_div);
舉例,為指定節點不斷增加新節點:
<div id="demo"> <div id="thisNode">点击添加新节点</div> </div> <script type="text/javascript"> document.getElementById("demo").onclick=function(){ var ele_div=document.createElement("div"); var ele_text=document.createTextNode("这是新节点 "); ele_div.appendChild(ele_text); this.appendChild(ele_div); } </script>
遺憾的是,Javascript並沒有提供在指定節點的後面插入節點的方法,也沒有提供在指定節點的前面插入子節點的方法。
不過,我們可以使用現有的方法來實作。下面給出兩個自訂的函數。
/** * func insertAfert 在指定节点的后面插入节点 * pram newNode 要添加的新节点 * pram thisNode 当前节点(指定节点) **/ function insertAfter(newNode, thisNode){ var parent = thisNode.parentNode; if (parent.lastChild == thisNode) { // 如果父节点的最后一个节点是指定节点,则直接添加 parent.appendChild(newNode); }else { parent.insertBefore(newNode , thisNode.nextSibling); //如果不是,则在指定节点的下一个节点前面插入 } } /** * func appendChildPre 在指定节点的前面插入子节点 * pram parent 父节点 * pram newNode 要添加的新节点 **/ function appendChildPre(parent , newNode){ if(parent.length>=1){ // 如果存在子节点,则在第一个子节点的前面添加 parent.insertBefore(newNode , parent.firstNode); }else{ // 如果不存在,则在最后添加 parent.appendChild(newNode); } }