DOM 创建、插入和删除元素

创建DOM元素
createElement(标签名)  创建一个节点
appendChild(节点)   追加一个节点
例子：为ul插入li

window.onload=function()
{
    
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    
    oBtn.onclick=function ()
    {
        var oLi=document.createElement('li');
        
        //父.appendChild(子节点)
        oUl.appendChild(oLi);
    }
}
<input id="btn1" type="button" value="创建Li"/>
<ul id="ul1">
    <li>aaa</li>
</ul>

insertBefore 插入元素

<script>
window.onload=function()
{
    
    var oBtn=document.getElementById('btn1');
    var oText=document.getElementById('text');
    var oUl=document.getElementById('ul1');
    
    oBtn.onclick=function ()
    {
        var oLi=document.createElement('li');
        var aLi=oUl.getElementsByTagName('li');
        
        oLi.innerHTML=oText.value;
        //父.appendChild(子节点)
        if(aLi.length==0)
        {
            oUl.appendChild(oLi);
        }
        else
        {
            oUl.insertBefore(oLi,aLi[0]);
        }
    }
}
</script>
<input id="text" type="text" />
<input id="btn1" type="button" value="创建Li"/>
<ul id="ul1">
</ul>

 removerChild 删除元素

<script>
window.onload=function()
{
    var oUl=document.getElementById('ul1');
    var aA=oUl.getElementsByTagName('a');
    var i=0;
    
    for(i=0;i<aA.length;i++)
    {
        aA[i].onclick=function()
        {
            oUl.removeChild(this.parentNode)
        }
    }
}
</script>
<ul id="ul1">
    <li>fsdfds<a href="#">删除</a></li>
    <li>fsdfds1<a href="#">删除</a></li>
    <li>fsdfds2<a href="#">删除</a></li>
    <li>fsdfds3<a href="#">删除</a></li>
    <li>fsdfds4<a href="#">删除</a></li>
    <li>fsdfds5<a href="#">删除</a></li>
</ul>