Javascript动态创建控件

最新推荐文章于 2023-10-12 12:15:31 发布

原创最新推荐文章于 2023-10-12 12:15:31 发布 · 2.8k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#javascript #input #button #file

JavaScript 同时被 3 个专栏收录

38 篇文章

订阅专栏

10 篇文章

订阅专栏

常用JavaScript代码

6 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript动态创建HTML控件，特别是文件输入框。通过`createElement`函数，可以创建并设置input元素的类型、名称和值。示例代码中展示了如何在点击按钮后添加新的文件输入框，进一步扩展了动态创建input元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

}

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。