JS-DOM操作应用

浏览数：33 / 时间：2015年06月09日

父级.appendChild(子节点)

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

<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById(‘btn1‘);
    var oUl=document.getElementById(‘ull‘);
    var oTxt=document.getElementById(‘txt1‘);
    
    oBtn.onclick=function ()
    {
        var oLi=document.createElement(‘li‘);
        var aLi=oUl.getElementsByTagName(‘li‘);
        oLi.innerHTML=oTxt.value;
        
        if(aLi.length>0)
        {
            oUl.insertBefore(oLi,aLi[0]);
        }else
        {
            oUl.appendChild(oLi);
            }
    }
}
</script>
</head>

<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ull">
</ul>
</body>

技术分享

父级.removeChild(子节点)

<title>无标题文档</title>
<script>
window.onload=function ()
{
    var aA=document.getElementsByTagName(‘a‘);
    var oUl=document.getElementById(‘ull‘);
    
    for(var i=0;i<aA.length;i++)
    {
        aA[i].onclick=function ()
        {
            oUl.removeChild(this.parentNode);
        }
    }
}
</script>
</head>

<body>
<ul id="ull">
    <li>23451253<a href="javascript:;">删除</a></li>
    <li>fwefw<a href="javascript:;">删除</a></li>
    <li>sdgvsdaf<a href="javascript:;">删除</a></li>
    <li>bvdfde<a href="javascript:;">删除</a></li>
    <li>45646<a href="javascript:;">删除</a></li>
</ul>
</body>

技术分享

文档碎片

文档碎片可以提高DOM操作性能（理论上） /*现在IE9，火狐浏览器性能都有所提高，影响不大*/

document.createDocumentFragment()

<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oUl=document.getElementById(‘ull‘);
    var oFrag=document.createDocumentFragment();
    
    for(var i=0;i<10000;i++)
    {
        var oLi=document.createElement(‘li‘);
        oFrag.appendChild(oLi);
    }
    oUl.appendChild(oFrag);
}
</script>
</head>

<body>
<ul id="ull"></ul>
</body>