javascript实现的动态添加表单元素input,button等(appendChild)


Posted in Javascript onNovember 24, 2007

写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!

我想各位在很多网站上都看到过类似的效果!

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),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
详解Bootstrap插件
Apr 25 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
用js查找法实现当前栏目的高亮显示的代码
Nov 24 #Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 #Javascript
document.designMode的功能与使用方法介绍
Nov 22 #Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 #Javascript
摘自百度的图片轮换效果代码
Nov 19 #Javascript
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 #Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 #Javascript
You might like
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
非常好的js代码
2006/06/27 Javascript
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
js 判断 enter 事件
2009/02/12 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
Python实现批量下载图片的方法
2015/07/08 Python
python僵尸进程产生的原因
2017/07/21 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
Python分支结构(switch)操作简介
2018/01/17 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
开朗女孩的自我评价
2014/02/10 职场文书
小学班主任评语大全
2014/04/23 职场文书
国庆促销活动总结
2014/08/29 职场文书
小学班级特色活动方案
2014/08/31 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
送给客户微信问候语!
2019/07/04 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android