倒叙插入：li

最新推荐文章于 2022-03-05 14:46:13 发布

浮生途

最新推荐文章于 2022-03-05 14:46:13 发布

阅读量584

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.csdn.net/jy123_123/article/details/89191001

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
    window.onload=function (ev) {
        var oUl = document.getElementById("ul1");
        var oBtn = document.getElementById("btn");
        var tExt=document.getElementById("btn1");

        oBtn.onclick=function (ev2) {
            var oLi=document.createElement("li");    //createElement：创建li；
            var ali=oUl.getElementsByTagName("li");  //获取ul里的li；
            oLi.innerHTML=tExt.value;
         
            if(ali.length>0){                        //判断ul里li个数；
                  oUl.insertBefore(oLi,ali[0]);      //insertBefore:向父级倒序插入li；
            }
            else {
                oUl.appendChild(oLi);                //appendChild：向父级插入li；
            }


        }
    }

    </script>

</head>
<body>
<input id="btn1" type="text">
<input id="btn" type="button" value="li">
 <ul id="ul1"></ul>

</body>

</html>