Javascript 动态添加控件

---------------------------------------------------动态添加控件的三种方法-----------------------------------

<html>
<head>
   <script>
    function add1()
   {
      var obtn=document.createElement("input");
    obtn.setAttribute("type","button");
    obtn.setAttribute("value","test1");
    document.body.appendChild(obtn);//注意如果有form表单不要忘记加入表单
    }
function add2()
{
   var obtn=document.createElement("input");
   obtn.type="button";
   obtn.value="test2";
   document.body.appendChild(obtn);
}
function add3()
{
   var obtn="<input type='button' value='test3'/>";
   document.body.innerHTML=obtn;//这个方法会删除body中的其它控件 可以预先加到固定的容器中
  
}
   </script>  
</head>

<body>
<input type="button" value="add1" onclick="add1()"/>
<input type="button" value="add2" onclick="add2()"/>
<input type="button" value="add3" onclick="add3()"/>
</body>

</html>


--------------------------------------动态添加图像--------------------------------------------------------
function add4()
   {
    var obtn=document.createElement("input");    
    obtn.setAttribute("type","image");
    obtn.setAttribute("src","mm.jpg");

    document.body.appendChild(obtn);//注意如果有form表单不要忘记加入表单
    }
posted on 2012-04-22 15:08 gzh4455 阅读(1046) 评论(0) 编辑收藏举报