码迷,mamicode.com
首页 > 其他好文 > 详细

DOM中的创建,插入,删除

时间:2015-08-07 15:58:26      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:

1.创建一个节点,用creatElement(TagName)

appendChild 是添加子节点。用法是   父级.appendChild(子节点);

2.插入用insertBefore

用法  父级.insertBefore(子节点,在谁之前)。  我犯得错误是没有把创建的li获取出来,直接写的oLi[0],要知道oLi并不是一个数组。他仅仅是一个变量。

oBtn.onclick = function (){
        var oLi = document.createElement(‘li‘);
//        oUl.appendChild(oLi);
        oLi.innerHTML = oTxt.value;
        oUl.insertBefore(oLi,oLi[0]);            错误示范
    };
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>


    </style>
</head>
<body>
<input id="txt" type="text" />
<input id="btn" type="button"/>
<ul id="ull"></ul>
<script>
    var oBtn = document.getElementById(btn);
    var oUl = document.getElementById(ull);
    var oTxt = document.getElementById(txt);
    var aLi = document.getElementsByTagName(li);
    oBtn.onclick = function (){
        var oLi = document.createElement(li);
//        oUl.appendChild(oLi);
        oLi.innerHTML = oTxt.value;

        if(aLi.length>0)
        {
            oUl.insertBefore(oLi,aLi[0]);
        }
        else
        {
            oUl.appendChild(oLi);
        }
    };
</script>

</body>
</html>

删除子节点   用法   父级.removeChild(子节点)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>


    </style>
</head>
<body>
<ul id="ull">
    <li>egdf<a href="javascript:">删除</a></li>
    <li>bnfgd<a href="javascript:">删除</a></li>
    <li>qr43<a href="javascript:">删除</a></li>
    <li>rgs<a href="javascript:">删除</a></li>
    <li>shdy<a href="javascript:">删除</a></li>

</ul>
<script>
    var oUl = document.getElementById(ull);
    var aA = document.getElementsByTagName(a);
    for(var i=0;i<aA.length;i++) {
        aA[i].onclick = function () {
            oUl.removeChild(this.parentNode);
        }
    }
</script>

</body>
</html>

 

DOM中的创建,插入,删除

标签:

原文地址:http://www.cnblogs.com/zhuni/p/4711005.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!