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 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
js+html制作简单验证码
Feb 16 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
Vue.js中的高级面试题及答案
Jan 13 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数据采集的详解
2013/06/02 PHP
php中使用sftp教程
2015/03/30 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
vue自定义指令用法经典实例小结
2019/03/16 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python实现各种插值法(数值分析)
2019/07/30 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python判断链表是否有环的实例代码
2020/01/31 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
如何把python项目部署到linux服务器
2020/08/26 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
网上开店必备创业计划书
2014/01/26 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
2014年端午节活动方案
2014/03/11 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
团支部建设方案
2014/05/02 职场文书
承诺书样本
2014/08/30 职场文书
环卫工人慰问信
2015/02/15 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
Python 数据可视化之Seaborn详解
2021/11/02 Python