JavaScript 动态删除/添加HTML表单元素


这是一个利用JavaScript动态添加/删除HTML元素的实例，这里被动态添加、删除的是表单元素，一个文件上传域，使用JS控制自动添加，你一些邮箱添加附件的功能一样，同时也可以动态删除，比较常用了。

答案：<HTML>
<HEAD>
<title>动态添加/删除HTML元素</title>
<script   language="javascript">   
    var count= 0 ;   
    var maxfile = 5;
     增加元素
    function addUpload() {  
        if(count >= maxfile)    return;//限制最多maxfile个文件框
        count++; 
        //自增id不同的HTML对象，并附加到容器最后
        var newDiv =  "<div id=divUpload" + count +">"
            + " <input id=file" + count + " type=file size=50 name=upload>"
            + " <a href=javascript:delUpload('divUpload" + count + "');>删除</a>"
            + " </div>";   
          document.getElementById("uploadContent").insertAdjacentHTML("beforeEnd", newDiv);     
    }   
    //删除指定元素
    function delUpload(diva) {  
        count--; 
        document.getElementById(diva).parentNode.removeChild(document.getElementById(diva));   
    }   
  </script>
</HEAD>
<body   MS_POSITIONING="GridLayout">
<form   id="Form1"   method="post"   runat="server"   enctype="multipart/form-data">
  <div>
    <table>
      <tr>
        <td   id="tdRrmove"   width="2000">
        <!--承接整个file文件框的HTML容器-->
        <div id="uploadContent">
            <!--默认的file文件框
       <div id=div1><input id=file1 type=file size=50 name=upload></div>-->
        </div>
        </td>
      </tr>
    </table>
  </div>
  <a href="javascript:addUpload()">添加附件</a>
  <br/>
  <br/>
</form>
</body>
</HTML>

上一个：DOM操作XML文档向表格添加数据
下一个：点击按钮选中文本框的内容，JS代码

更多图片编程知识: