js在某元素节点前增加一个节点无法添加,控制台也没有报错

js在某元素节点前增加一个节点无法添加,控制台也没有报错

问题描述:

<body>
        <ul id="test"><li>JavaScript</li><li>HTML</li></ul>

        <script>
            var otest = document.getElementById("test");
            var oli = otest.childNodes[0];
            var nli = document.createElement('li');
            nli.innerHTML= 'php';
            for(var i=0;i<oli.length;i++){
                if(oli[i].innerHTML=='HTML'){
                    oli.insertBefore(nli,oli[i]);
                }
            }
        </script>

    </body>

var oli = otest.childNodes[0];

表示第一个li节点,后面的循环用它就错了。

修改后:

var otest = document.getElementById("test");
var nli = document.createElement('li');
nli.innerHTML= 'php';
for(var i=0;i<otest.children.length;i++){
    if(otest.children[i].innerHTML=='HTML'){
        otest.insertBefore(nli,otest.children[i]);
    }
}