当前位置: 代码迷 >> JavaScript >> Javascript动态创设控件
  详细解决方案

Javascript动态创设控件

热度:388   发布时间:2012-11-23 00:03:43.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;
}
?
  相关解决方案