在项目开发中，有时需要在一个页面动态地增加和删除一段固定的内容。下面代码即可实现在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>