insertBefore()，appendChild()创建添加列表实例

定义：

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);

我们这里没有涉及到的，但程序中要注意的是appendChild()是先把元素从原有父级中删除，在添加到新的父级。