javascript实现的动态添加表单元素input,button等(appendChild)
更新时间：2007年11月24日 12:22:31 投稿：mdxy-dxy
这篇文章给大家介绍了javascript实现的动态添加表单元素input,button等(appendChild)的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!
我想各位在很多网站上都看到过类似的效果!
1、先用document.createElement方法创建一个input元素！
var newInput = document.createElement("input");
2、设定相关属性，如name,type等
newInput.type=mytype; newInput.name="input1";
3、用appendChild方法,将元素追加到某个标签内容中！
TemO.appendChild(newInput);
Javascrip核心代码：
<script language="javascript">
function AddElement(mytype){
var mytype,TemO=document.getElementById("add");
var newInput = document.createElement("input");
newInput.type=mytype;
newInput.name="input1";
TemO.appendChild(newInput);
var newline= document.createElement("br");//创建一个BR标签是为能够换行！
TemO.appendChild(newline);
}
</script>
<html >
<head>
<title>动态添加表单元素</title>
</head>
<script language="javascript">
function AddElement(mytype){
var mytype,TemO=document.getElementById("add");
var newInput = document.createElement("input");
newInput.type=mytype;
newInput.name="input1";
TemO.appendChild(newInput);
var newline= document.createElement("br");
TemO.appendChild(newline);
}
</script>
<body>
<form action="" method="get" name="frm">
<div id="add">
<input type="text" name="textfield"><br>
</div>
</form>
<input name="" type="button" value="新建文本框" onClick="AddElement('text')" />
<input name="" type="button" value="新建复选框" onClick="AddElement('checkbox')" />
<input name="" type="button" value="新建单选框" onClick="AddElement('radio')" />
<input name="" type="button" value="新建文件域" onClick="AddElement('file')" />
<input name="" type="button" value="新建密码框" onClick="AddElement('password')" />
<input name="" type="button" value="新建提交按钮" onClick="AddElement('submit')" />
<input name="" type="button" value="新建恢复按钮" onClick="AddElement('reset')" />
</body>
</html>
以上所述是小编给大家介绍的javascript实现的动态添加表单元素input,button等(appendChild)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本篇文章主要是对js判断页面中是否有指定控件的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要为大家详细介绍了基于openlayers4实现点的扩散效果 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
今天小编就为大家分享一篇在layui tab控件中载入外部html页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
下面小编就为大家分享一篇JS计算距当前时间的时间差实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了JS如何根据当前日期获取一周所有日期,文中通过实例代码补充介绍了js获取当前一周的时间,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
有时候是只想告知用户这个地方是可以进行勾选操作的而不想让用户在此处勾选（比如在信息展示页面），这时候就需要将复选框设置成只读的效果，具体实现方法如下2013-08-08
本文主要介绍了原生js仿浏览器滚动条效果的实例。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
本文通过实例代码给大家介绍了js 滚轮控制图片缩放大小和拖动，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-11-11
IFrame对象占用的内存资源在窗体关闭后不会释放。弹出关闭反复多次后，IE浏览器内存占用可超过数百M，严重时IE浏览器报错2014-08-08
在本章中，我们将分析Prototypejs中关于JavaScript继承的实现,需要的朋友可以参考下2016-10-10
最新评论