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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
原生js实现购物车
Sep 23 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
用Socket发送电子邮件
2006/10/09 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
跟老齐学Python之Import 模块
2014/10/13 Python
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
军训自我鉴定200字
2014/02/13 职场文书
就业协议书范本
2014/10/08 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
焦点访谈观后感
2015/06/11 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python