DOM2

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.οnclick=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>

2.插入元素

insertBefore(节点、原有节点在已有元素前插入)

3.删除DOM

removeChild(节点,删除一个节点)

发布了51 篇原创文章 · 获赞 19 · 访问量 1万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章