javascript 创建插入和删除DOM元素

1、创建DOM元素

• creatElement(标签名)　　创建一个节点
• appendChild(标签名)　　追加一个节点

  • <input type="text" name="" id="txt1" />
    
    <input type="button" value="创建li" id="btn1" />
    
    <ul id="ul1">
    
        
    
    </ul>
    
    <script>
    
    var oUl = document.getElementById("ul1");
    
    var oBtn = document.getElementById("btn1");
    
    var oTxt = document.getElementById("txt1");
    
    oBtn.onclick = function () 
    
    {
    
        var oLi = document.createElement("li");
    
        oLi.innerHTML = oTxt.value;
    
        oUl.appendChild(oLi);　　//先appendChild再设置innerHTML也可以，但是这样做浏览器的渲染就是2次了，现在这样只渲染了一次
    
    }
    
    </script>

2、插入DOM元素

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

<input type="text" name="" id="txt1" />

<input type="button" value="创建li" id="btn1" />

<ul id="ul1">

    

</ul>

<script>

var oUl = document.getElementById("ul1");

var oBtn = document.getElementById("btn1");

var oTxt = document.getElementById("txt1");

oBtn.onclick = function () 

{

    var oLi = document.createElement("li");

    var aLi = oUl.getElementsByTagName("li");

    oLi.innerHTML = oTxt.value;

    //oUl.insertBefore(oLi,aLi[0]); 这里直接插入会报错，因为aLi[0]不存在

    if(aLi[0])

    {

        oUl.insertBefore(oLi,aLi[0]);

    }

    else

    {

        oUl.appendChild(oLi);

    }

}

</script>

3、删除DOM元素

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

<ul id="ul1">

    <li>12378123 <a href="#">删除</a></li>

    <li>adf <a href="#">删除</a></li>

    <li>werwer <a href="#">删除</a></li>

    <li>xcbc <a href="#">删除</a></li>

    <li>123123 <a href="#">删除</a></li>

    <li>zbfdb <a href="#">删除</a></li>

</ul>

<script>

var oUl = document.getElementById("ul1");

var aBtn = document.getElementsByTagName("a");

for(var i=0; i<aBtn.length; i++)

{

    aBtn[i].onclick = function () 

    {

        oUl.removeChild(this.parentNode);

    }

}

</script>

4、文档碎片

当创建大量的节点的时候，可以使用文档碎片。

文档碎片可以提高DOM操作性能（理论上）

document.createDocumentFragment();