insertBefore()指定的已有子節點之前插入新的子節點

標籤：document   win   app   ext   rtb   nload   pen   end   cti   

定義：

insertBefore() 方法在您指定的已有子節點之前插入新的子節點。

文法：

父級.insertBefore(新的子節點,指定的已有子節點) 

執行個體：

<input id="txt1" type="text"/><input id="btn1" type="button" value="建立li"/><ul id="ul1"></ul>

window.onload=function (){    var oBtn=document.getElementById(‘btn1‘);    var oUl=document.getElementById(‘ul1‘);    var oTxt=document.getElementById(‘txt1‘);    oBtn.onclick=function ()    {        var oLi=document.createElement(‘li‘);        var aLi=oUl.getElementsByTagName(‘li‘);                oLi.innerHTML=oTxt.value;                //父級.appendChild(子節點);        if(aLi.length>0)        {            oUl.insertBefore(oLi, aLi[0]);        }        else        {            oUl.appendChild(oLi);        }    };};

當ul中沒有li時oUl.insertBefore(oLi, aLi[0]);會報錯，所以判斷aLi.length為0時使用oUl.appendChild(oLi);

insertBefore()指定的已有子節點之前插入新的子節點