dom 节点的添加删除 与修改 

<title>Insert title here</title>
<style type="text/css">
    div{
        table:#00ccff 1px solid;
        width: 200px;
        padding: 30px;
        margin: 10px;
    }
    #div_1{
        background-color: #00ccdd;
    }
     #div_2{
        background-color: #0cdd0c;
    }
     #div_3{
        background-color: #cc00dd;
    }
     #div_4{
        background-color: #cdddcd;
    }
    
</style>
<script type="text/javascript">
    function crtAndAdd1(){
        //1，创建节点，使用docuemnt中的createTextNode方法
          var oTextNode=document.createTextNode("java 好好学习啊呵呵呵学习");
        //获取div_1的节点
          var ogetNode=document.getElementById("div_1");
        //将文本节点添加到div_1中
          ogetNode.appendChild(oTextNode);      
        }
        //需求：在div_1中创建并添加一个按钮节点
    function crtAndAdd2(){
        //创建一个按钮节点
        var oButNode=document.createElement("input");
        oButNode.type="button";
        oButNode.value="一个新按钮";
        //获取div的节点
        var ogetNode=document.getElementById("div_1");
            //将按钮节点添加到div_1中
        ogetNode.appendChild(oButNode); 
    }
    //另一种添加方式
    function crtAndAdd3(){
        var oDivNode=document.getElementById("div_1");
    //    oDivNode.innerHTML="xxxx";
    //    oDivNode.innerHTML="<input type='button' value='按钮'/>";
        oDivNode.innerHTML="<a href='http://www.baidu.com'>百度</a>";
    }
    //需求讲div_2删除
    function delNode(){
        //获取节点
        var oDivNode=document.getElementById("div_2");
    //    oDivNode.removeNode(true);较少用
    //一般使用removerChild方法。删除子节点
    //获取div_2的父节点，然后再用父节点的removerchild精div_2删除
    oDivNode.parentNode.removeChild(oDivNode);
    }
        //需要：用div_3节点替换div_1节点
    function updateNode(){
        var oDivNode_1=document.getElementById("div_1");
        var oDivNode_3=document.getElementById("div_3");
    //    oDivNode_1.replaceNode(oDivNode_3);
        oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
    }
</script>
</head>
<body>
    <input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/>
    <input type="button" value="删除节点" onclick="delNode()"/>
    <input type="button" value="修改节点" onclick="updateNode()"/>
   
    <div id="div_1">
       
    </div>
    <div id="div_2">
        java:::好好学习Day！！！！！！
    </div>
    <div id="div_3">
        java:::好好学习Day！！！！！！
    </div>
    <div id="div_4">
        java:::好好学习Day！！！！！！
    </div>
</body>
</html>

posted on 2012-11-03 21:22  蝌蚪的精神  阅读(322)  评论(0)  编辑  收藏  举报

导航