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();