我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 39, 文章 - 310, 评论 - 411, 引用 - 0
数据加载中……

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;
} 


posted on 2008-01-31 16:07 々上善若水々 阅读(2620) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。
网站导航: