(四)动态生成控件,点击button添加控件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
        var i=1;
        function add(){
        var top=document.getElementById("top");
        var input=document.createElement("input");
        var div=document.createElement("div");
        div.innerHTML="学生:"+i
        div.id=i
        i=i+1;

        input.type="text"
        input.name="v";
        input.onclick=function remo(){alert(i);top.removeChild(div)};//点击删除控件
        input.value="nihao";
        input.id="v";
        div.appendChild(input);
        top.appendChild(div);
        }
    </script>
</head>


<body>

    <div><input type="button" onclick="add()" value="添加" /></div>
    <div id="top"></div>
</body>
</html>

 

posted @ 2015-03-25 13:49  左魅颜  阅读(205)  评论(0编辑  收藏  举报