Javascript动态创建控件

 

< html >

< head >

< title ></ title >
< script  language ="javascript"  type ="text/javascript" >
function createElement(tagName, type)
{
   var element = null;
   try
   {
      element = document.createElement('<' + tagName + ' name="'+name+'" />');
      element.type = type;
      element.value = value;
   }
   catch (e)
   {
   }
   if ( ! element)
   {
      element = document.createElement(tagName);
      element.setAttribute("type", type);
   }
   return element;
}


function add()
{
    var input1 = createElement("input","file");
    var br = document.createElement("<br />");
    var files = document.getElementById("files");
    files.appendChild(br);
    files.appendChild(input1);
}
</ script >
</ head >

< body >
< input  type ="button"  value ="add"  onclick ="add();" />
< div  id ="files" >
< input  type ="file" />
</ div >
</ body >

</ html >

延伸一下，动态创建input任意元素代码片段如下即可:

function  createElement(tagName,name,type,value)
{
    var element = null;
    try 
    {
        element = document.createElement('<'+tagName+' name="'+name+'" />');
        element.type = type;
        element.value = value;
    }
    catch (e)
    {
    }
    if (!element)
    {
        element = document.createElement(tagName);
        element.setAttribute("type",type);
        element.setAttribute("name",name);
        element.setAttribute("value",value);
   }
   return element;
}  

々上善若水々 2008-01-31 16:07 发表评论