使用JavaScript实现自动添加任意数量的表单内容,表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<title>无标题文档</title>
6

var i =2;//设置基数为2
8

function addFile()
9

{
10

var dv = document.getElementById("dvFiles");//设置生成表单内容的容器，即放置位置
11

var file = document.createElement("input");//建立input标记的内容
12

file.type = "text";//设置类型
13

file.id = file.name = "image" + i;//设置id和名称
14

dv.appendChild(file);//在容器里添加
15

var btn = document.createElement("input");//建立input标记内容
16

btn.type = "button";//类型
17

btn.id = btn.name="btn"+i;//id和名称
18

btn.value = "删除";//内容值
19

btn.onclick = function() {//单击调用函数
20

var b = document.getElementById(btn.id);//获得相关内容
21

dv.removeChild(b.nextSibling); //remove <BR>//删除
22

dv.removeChild(b.previousSibling); //file
23

dv.removeChild(b); //btn
24

}
25

dv.appendChild(btn);
26

dv.appendChild(document.createElement("BR")); //打印换行
27

}
28

</script>
30

<body><input type="text" name="image1" />
32

<div id="dvFiles"></div><input type="button" name="Submit" value="添加上传" onClick="addFile()">
33

</body>
34

</html>