document对象-操作元素的文档结构

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="application/javascript">
 7         function addFile(){
 8             //创建父亲元素对象
 9             var div=document.getElementById("container")
10
11             var input1 =document.createElement("input")
12             var br=document.createElement("br")
13             input1.type="file"
14             var input2 =document.createElement("input")
15             input2.type="button"
16             input2.value="删除"
17             input2.onclick=function(){
18                 div.removeChild(input1)
19                 div.removeChild(br)
20                 div.removeChild(input2)
21             }
22             div.appendChild(input1)
23             div.appendChild(input2)
24             div.appendChild(br)
25
26         }
27     </script>
28 </head>
29 <body>
30     <input type="button" value="添加附件" onclick="addFile()">
31     <hr>
32     <div id="container"></div>
33 </body>
34 </html>