码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-12-29 11:13:59      阅读:350      评论:0      收藏:0      [点我收藏+]

标签: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()指定的已有子节点之前插入新的子节点

标签:document   win   app   ext   rtb   nload   pen   end   cti   

原文地址:http://www.cnblogs.com/hjbky/p/6231926.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!