insertBefore()指定的已有子节点之前插入新的子节点

Posted 2020-08-25 安静的女汉纸

定义：

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