DOM之练习2
<!DOCTYPE html> <!-- 需求 1.点击“添加附件”按钮,出现一个添加附件的input 2.点击“删除”按钮,删除一行附件 --> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function addFile(){ var father = document.getElementById("content"); var filer = document.createElement("input"); filer.type="file"; var myspan = document.getElementById("myspan"); var buttoner = document.createElement("input"); buttoner.type="button"; buttoner.value="删除"; buttoner.onclick=function(){ removeele(this); } father.insertBefore(filer,myspan); father.insertBefore(buttoner,myspan); var br = document.createElement("br"); father.insertBefore(br,myspan); } function removeele(item){ var father = document.getElementById("content"); father.removeChild(item.previousSibling); father.removeChild(item.nextSibling); father.removeChild(item); } </script> </head> <body> <input type="button" value="添加附件" onclick="addFile()"/> <hr/> <div id="content"> <input type="file" /><input type="button" value="删除" onclick="removeele(this)"/><br/> <input type="file" /><input type="button" value="删除" onclick="removeele(this)"/><br/> <span id="myspan">...</span> </div> </body> </html>