동적 추가, 삭제 div

1805 단어
프로젝트 개발에서 때때로 한 페이지에서 고정된 내용을 동태적으로 추가하고 삭제해야 한다.다음 코드는 a1과 a2 사이에div 블록을 동적으로 추가할 수 있습니다.
<html>
  <body>
  <div   id="a">   
       <div   id="a1">1</div> 
       <div   id="a2">2</div>   
  </div>   
        <a href="javascript:addDiv();">  div</a>                          
  </body>
<script   type="text/javascript">   
 var i=1;
 function addDiv(){
     //  div  
       var div = document.createElement("div");
    //  div  
        div.id = "div"+i;
    //  div  
         if(i>2){
            alert("    4 ");
            return false;
            }
        if(i==1)
           div.innerHTML = "<table> <tr><td>   :  </td><td>   :<input id='buildingName1'  type='text' /></td> <td><button onclick='del(1)'>  </button> </td></tr> </table>";
        if(i==2)
           div.innerHTML = "<table> <tr><td>   : </td><td>   :<input  id='buildingName1'  type='text' /></td> <td><button onclick='del(2)'>  </button> </td></tr> </table>";
    // div      ,       document.getElementById('') 
        document.body.appendChild(div);
        document.getElementById("a").insertBefore(div,document.getElementById("a2")); 
        i++;
}
 function del(a){
    if(a<i-1){
        alert("      !");
        return false;
    }
       var my = document.getElementById("div"+a);
       if (my != null)
       my.parentNode.removeChild(my);
       i--;
 }
 </script>   
</html>

좋은 웹페이지 즐겨찾기