DOM基础2

创建、插入和删除元素：

创建DOM元素：

createElement(标签名)
appendChild(节点)

插入元素：

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

删除DOM元素：

removeChild(节点)

创建元素：li

    <script>
        window.onload=function(){
            var obtn=document.getElementById('btn1');
            var oUl=document.getElementById("ul1");
          
            obtn.onclick=function(){
                var oLi=document.createElement('li');

                oUl.appendChild(oLi);
            }
        }
    </script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="创建li"/>
<ul id="ul1">

</ul>
</body>

创建元素：li+txt里的东西。


    <script>
        window.onload=function(){
            var obtn=document.getElementById('btn1');
            var oUl=document.getElementById("ul1");
            var txt1=document.getElementById('txt1');
            obtn.onclick=function(){
                var oLi=document.createElement('li');
                oLi.innerHTML=txt1.value;
                oUl.appendChild(oLi);
            }
        }
    </script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="创建li"/>
<ul id="ul1">

</ul>
</body>

把元素插末尾：

appendChild实际是添加到末尾。

父级.appendChild(子节点)

父级.insertBefore(子节点，在谁之前)


    <script>
        window.onload=function(){
            var obtn=document.getElementById('btn1');
            var oUl=document.getElementById("ul1");
            var aLi=oUl.getElementsByTagName('li');
            var txt1=document.getElementById('txt1');
            obtn.onclick=function(){
                var oLi=document.createElement('li');
                oLi.innerHTML=txt1.value;
                oUl.insertBefore(oLi,aLi[0]);
            }
        }
    </script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="创建li"/>
<ul id="ul1">

</ul>

但是上面这段代码在IE下出错了，因为一开始ul下就没有li,那么更没有li[0]。

         obtn.onclick=function(){
                var oLi=document.createElement('li');
                oLi.innerHTML=txt1.value;
                if(aLi.length>0){
                    oUl.insertBefore(oLi,aLi[0]);
                }else{
                    oUl.appendChild(oLi);
                }
              
            }

父级.removeChild(子节点)

 <script>
        window.onload=function(){
            var oUl=document.getElementById('ul1');
            var aA=document.getElementsByTagName('a');
            var aLi=oUl.getElementsByTagName('li');

            for(var i=0;i<aA.length;i++){
                aA[i].onclick=function(){
                    oUl.removeChild(/*aLi[i]*/this.parentNode);
             }

            }
        }
    </script>
</head>
<body>
<ul id="ul1">
    <li>nfjksandja <a href="javascript:;">删除</a></li>
    <li>csffwdf<a href="javascript:;">删除</a></li>
    <li>grhtrere<a href="javascript:;">删除</a></li>
    <li>fdwwfewde<a href="javascript:;">删除</a></li>
    <li>214325433<a href="javascript:;">删除</a></li>
</ul>

</body>

文档碎片：

可以提高DOM操作性能（理论上）
文档碎片原理
```
document.createDocumentFragment();
```

在对高级浏览器上对性能没有改变有的时候还会降低。

<script>
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        var oFrag=document.createDocumentFragment();
        for(var i=0;i<1000;i++){
            var oLi=document.createElement('li');
            oFrag.appendChild(oLi);
        }
        oUl.appendChild(oFrag)
    }
</script>
<body>
<ul id="ul1">

</ul>

猜你喜欢