javascript实现的动态添加表单元素input,button等(appendChild)
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!
我想各位在很多网站上都看到过类似的效果!
1、先用document.createElement方法创建一个input元素!
2、设定相关属性,如name,type等
newInput.name="input1";
3、用appendChild方法,将元素追加到某个标签内容中!
Javascrip核心代码:
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>
我想各位在很多网站上都看到过类似的效果!
1、先用document.createElement方法创建一个input元素!
2、设定相关属性,如name,type等
newInput.name="input1";
3、用appendChild方法,将元素追加到某个标签内容中!
Javascrip核心代码:
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>
javascript实现的动态添加表单元素input,button等(appendChild)的更多相关文章
- 动态增加表单元素并获取元素的text和value提交
以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...
- js 动态添加表单 table tr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue教程1-01 v-model 一般表单元素(input) 双向数据绑定
vue教程1-01 v-model 一般表单元素(input) 双向数据绑定el:'#box',//这里放的是选择器.不然会不生效 <!DOCTYPE html> <html l ...
- JavaScript 学习(2)表单元素
##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...
- jquery动态添加表单数据
动态添加用户 实现代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html ...
- vue 使用 element ui动态添加表单
html部分 <div class="hello"> <el-form :model="dynamicValidateForm" ref=&q ...
- easy ui 表单元素input控件后面加说明(红色)
<%-- 上传图片到图库基本信息且将图片关联到图集 开始--%> <div id="win_AddPicLib" class="easyui-windo ...
- bootstrap如何把表单select input button弄在一行
bootstrap很多折叠样式css都已经写好,可以直接用,很方便.但是,如果遇到一些bootstrap文档里面没有的例子,估计很多初学者都懵了,然后会折腾很久也未见得有效.今天主要讲如何把selec ...
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
随机推荐
- node 基础小结
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- docker编排工具,docker-compose下载与安装
安装很简单,但是难免会遇到问题:1.安装curl -L https://github.com/docker/compose/releases/download/1.21.0/docker-compos ...
- 快速修改数据库日志的增长修改为50M[转]
尚未亲测..请君慎重使用.. SET NOCOUNT ON ), @sqlTotal NVARCHAR(MAX),@sqlSingle NVARCHAR(MAX),@sql NVARCHAR(MAX) ...
- SpagoBI系列----------[01]SpagoBI简介及安装步骤
商务智能套件SpagoBI提供一个基于J2EE的框架用于管理BI对象如报表.OLAP分析.仪表盘.记分卡以及数据挖掘模型等的开源BI产品.它提供的BI管理器能 够控制.校验.验证与分发这些BI对象. ...
- WPF Window对象的生命周期
WPF中所有窗口的基类型都是System.Windows.Window.Window通常用于SDI(SingleDocumentInterface).MDI(MultipleDocumentInter ...
- 移动端rem适配屏幕
九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...
- 资料汇总--Java
01.从零开始学springBoot 02.java资源大全中文版 03.谷歌 中国
- 【idea--git】
http://blog.csdn.net/autfish/article/details/52513465 工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张, ...
- jQuery插件 -- UI插件Tabs Widget 1.10
最近将tabs(标签页)整合到Admin LTE( 一个完全响应式管理模板,基于Bootstrap3的框架.)中使用.过程中走了不少弯路,原因是没有注意版本问题,jquery ui tabs 每次升级 ...
- struts2随笔
1.struts.properties配置常量等同于struts.xml中配置(置于类加载路径下面)struts.multipart.maxSize文件上传最大大小struts.action.exte ...