DOM2

来源：互联网发布：主播助手软件编辑：程序博客网时间：2024/06/06 04:11

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>

2.插入元素

insertBefore（节点、原有节点在已有元素前插入）

3.删除DOM

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

0 0