DOM2

最新推荐文章于 2023-03-16 23:38:15 发布

置顶栈长

最新推荐文章于 2023-03-16 23:38:15 发布

阅读量238

点赞数

分类专栏： java script 文章标签： dom

本文链接：https://blog.csdn.net/wdzhszyq/article/details/70597955

版权

java script 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.创建节点输出内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="" id="" value="" />
        <input type="button" name="" id="" value="新建" />
        <ul>

        </ul>
    </body>
    <script type="text/javascript">
        //新建一个文本
        (function(){
            var btn=document.querySelectorAll('input')[1];
            //console.log(btn);
            var text=document.querySelectorAll('input')[0];
            var oUl=document.querySelector('ul');
            btn.onclick=function(){
                //createElement创建//创建一个li变量名为oli;
                var oLi=document.createElement('li');
                //获取到父级下的所有子级元素；
                var aLi=oUl.getElementsByTagName('li');
                //
                oLi.innerHTML=text.value;
                //aLi是个数组，它的长度大于0，后输入的才能放到上面；
                if(aLi.length>0){
                    //如果想要后输入的显示在最上面，就用insertBefore(插入的元素,要插入的位置)
                    oUl.insertBefore(oLi,aLi[0]);
                }else{
                    //父级.appendChild.子级//创建的li给ul;
                    //插入的元素li
                    oUl.appendChild(oLi);
                }
            }
        })();
    </script>
</html>