Javascript 动态添加控件

最新推荐文章于 2021-06-04 21:17:39 发布

weixin_34378767

最新推荐文章于 2021-06-04 21:17:39 发布

阅读量117

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gzh4455/archive/2012/04/22/2464987.html

版权

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

<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" οnclick="add1()"/>
<input type="button" value="add2" οnclick="add2()"/>
<input type="button" value="add3" οnclick="add3()"/>
</body>

</html>


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

    document.body.appendChild(obtn);//注意如果有form表单不要忘记加入表单
    }

转载于:https://www.cnblogs.com/gzh4455/archive/2012/04/22/2464987.html

weixin_34378767

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript 动态添加控件

---------------------------------------------------动态添加控件的三种方法-----------------------------------<html><head> <script> function add1() { var obtn=document...
复制链接

扫一扫