JavaScript动态添加Input组件(转载)

在遇到需要添加附件或者上传文件时,附件的数量可能不定的,所以附件浏览框需要动态生成,我遇到了这个问题,但在网上没有找到好用的代码,于是自己写了一段,拿来共享:

<html> 
</head> 
<script language="javascript" type="text/ecmascript"> 
//====================== 
//功能:在表单中input file控件 
//参数:parentID---要插入input file控件的父元素ID 
// inputID----input file控件的ID 
//====================== 
function createInput(parentID,inputFileID){ 
var parent=$$$$(parentID);//获取父元素 

var div=document.createElement("div");//创建一个div容器用于包含input file 
var x=parseInt(Math.random()*(80-1))+1; 
var divName=inputFileID+x.toString();//随机div容器的名称 
div.name=divName; 
div.id=divName; 

var aElement=document.createElement("input"); //创建input 
aElement.name=inputFileID; 
aElement.id=inputFileID; 
aElement.type="file";//设置类型为file 

var delBtn=document.createElement("input");//再创建一个用于删除input file的Button 
delBtn.type="button"; 
delBtn.value="删除"; 
delBtn.onclick=function(){ removeInput(parentID,divName)};//为button设置onclick方法 

div.appendChild(aElement);//将input file加入div容器 
div.appendChild(delBtn);//将删除按钮加入div容器 
parent.appendChild(div);//将div容器加入父元素 
} 
//============================ 
//功能:删除一个包含input file的div 容器 
//参数:parentID---input file控件的父元素ID 
// DelDivID----个包含input file的div 容器ID 
//============================ 
function removeInput(parentID,DelDivID){ 
var parent=$$$$(parentID); 
parent.removeChild($$$$(DelDivID)); 
} 
//通过元素ID获取文档中的元素 
function $$$$(v){return document.getElementById(v);} 
</script> 
<body> 
<div align="left" id="div_Pic" style="border:1px solid #CCCCCC"> 
<input name="PicFile" type="file" id="ShowPicFile"> 
</div> 
<input type="button" onClick="createInput('div_Pic','PicFile')" name="button" id="button" value="+ 继续添加图片"> 
</body> 
</html>