节点的增删改查 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dom_curd.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
            div{
                border:#00ccff 1px solid;
                width:200px;
                padding:30px;
                margin:10px;
            }
            #div_1{
                background-color:#00ccff;
            }
            #div_2{
                background-color:#FFccff;
            }
            #div_3{
                background-color:#cc00ff;
            }
            #div_4{
                background-color:#00FF00;
            }
        </style>
  </head>
  
  <body>
          <script type="text/javascript">
              /*
             * 1，创建一个文本节点。
             * 2，获取div_1节点。
             * 3，将文本节点添加到div_1节点中。
             */
              function createAndAdd(){
                  var textNode=document.createTextNode("新创建的文本");
                  var divNode=document.getElementById("div_1");
                  divNode.appendChild(textNode);
              }
              
              //在div_1中创建一个button
              function createAndAdd2(){
                  //创建按钮
                  var buttonNode=document.createElement("input");
                  buttonNode.type="BUTTON";
                  buttonNode.value="一个新按钮";
                  //添加到div_1
                  var divNode=document.getElementById("div_1");
                  divNode.appendChild(buttonNode);
              }
              //通过另一种方式添加节点
              function createAndAdd3(){
                  var divNode=document.getElementById("div_1");
                  divNode.innerHTML="<input type='button' value='一个新按钮'/>";
              }
              
              //将div_2节点删除
              function deleteNode(){
                  var divNode=document.getElementById("div_2");
                  //删除方式一,自己删除自己(较少用)
                  //divNode.removeNode(true);
                  //删除方式二,拿父节点删除自己
                  divNode.parentNode.removeChild(divNode);
              }
              
              
              
              //将div_1替换成div_3
              function updateNode(){
                  var div1=document.getElementById("div_1");
                  var div3=document.getElementById("div_3");
                  
                  var copyDiv3=div3.cloneNode(true);
                  
                  //div1.parentNode.replaceChild(copyDiv3,div1);
                  div1.parentNode.replaceChild(div3,div1);
              }
              
              //将div_1克隆成div_3
              function cloneDemo(){
                  var div1=document.getElementById("div_1");
                  var div3=document.getElementById("div_3");
                  
                  var copyDiv3=div3.cloneNode(true);
                  
                  div1.parentNode.replaceChild(copyDiv3,div1);
                  //div1.parentNode.replaceChild(div3,div1);
              }
          </script>
          
          <input type="button" value="创建并添加节点" onclick="createAndAdd3()"/>
        <input type="button" value="删除节点" onclick="deleteNode()"/>
        <input type="button" value="修改节点" onclick="updateNode()"/>
        <input type="button" value="克隆节点" onclick="cloneDemo()"/>
          
          <div id="div_1">
            
        </div>
        
        <div id="div_2">
            好好学习，day day up！
        </div>
        
        <div id="div_3">
            div区域演示文字
        </div>
        
        <div id="div_4">
            节点的增删改查
        </div>
  
  </body>
</html>

 

posted @ 2017-01-11 15:43  天涯海角路  阅读(176)  评论(0)    收藏  举报