写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!
我想各位在很多网站上都看到过类似的效果!
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> 
 
 
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!
我想各位在很多网站上都看到过类似的效果!
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> 

javascript实现的动态添加表单元素input,button等(appendChild)的更多相关文章

  1. 动态增加表单元素并获取元素的text和value提交

    以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...

  2. js 动态添加表单 table tr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue教程1-01 v-model 一般表单元素(input) 双向数据绑定

    vue教程1-01   v-model 一般表单元素(input) 双向数据绑定el:'#box',//这里放的是选择器.不然会不生效 <!DOCTYPE html> <html l ...

  4. JavaScript 学习(2)表单元素

    ##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...

  5. jquery动态添加表单数据

    动态添加用户 实现代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html ...

  6. vue 使用 element ui动态添加表单

    html部分 <div class="hello"> <el-form :model="dynamicValidateForm" ref=&q ...

  7. easy ui 表单元素input控件后面加说明(红色)

    <%-- 上传图片到图库基本信息且将图片关联到图集 开始--%> <div id="win_AddPicLib" class="easyui-windo ...

  8. bootstrap如何把表单select input button弄在一行

    bootstrap很多折叠样式css都已经写好,可以直接用,很方便.但是,如果遇到一些bootstrap文档里面没有的例子,估计很多初学者都懵了,然后会折腾很久也未见得有效.今天主要讲如何把selec ...

  9. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

随机推荐

  1. Java - 尚学堂第八章常用类(将输入的string类型的值转为整数、浮点型、日期类型)

    import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...

  2. 《JavaScript编程精解》读书笔记

    第一章 JavaScript基础:值.变量.控制流程 JavaScript里有六种基本类型:number类型.string类型.boolean类型.object.function和undefined. ...

  3. (转)MySQL- 5.7 sys schema笔记,mysql-schema

    原文:http://www.bkjia.com/Mysql/1222405.html http://www.ywnds.com/?p=5045 performance_schema提供监控策略及大量监 ...

  4. Oracle 中运用rollup和cube实现汇总运算

    前言.看了很多的随笔博文内容都是关于rollup和cube的用法,发现一个问题,很多都是一样或者转载的,但这都不是重点,重点是,他们写的都太专业化了,直接给一个结论,并没有给出整个推理出这个结论的过程 ...

  5. hibernate 学习笔记2

    1.Criteria查询接口适用于组合多个限制条件来搜索一个查询集. 要使用Criteria,需要遵循以下步骤: *创建查询接口: Criteria criteria=session.createCr ...

  6. WEB下渗透测试经验技巧(全)[转载]

    Nuclear’Atk 整理的: 上传漏洞拿shell: 1.直接上传asp.asa.jsp.cer.php.aspx.htr.cdx….之类的马,拿到shell.2.就是在上传时在后缀后面加空格或者 ...

  7. PHP之数组和函数的基本教程

    [PHP数组的分类] 按照下标的不同,PHP数组分为关联数组与索引数组 索引数组:下标从0开始,依次增长: 关联数组:下标为字符串格式,每个下标字符串与数字的值一一关联对应(有点像对象的键值对) [关 ...

  8. 特殊引用类型(string)

    private string FuncWithParameters(int param1, String param2, List<string> param3) { // 我们在这里改变 ...

  9. css样式、js2种方式 控制字符个数,多余的字用省略号代替

    大家好,我是小菜 前端 ,技术不高,正在努力中充电!希望大家多多指教:css <div class="show">大家好,我是小菜 前端 ,技术不高,正在努力中充电!希 ...

  10. 一个Json、数组、Dictionary转换和数组对比的C#实例

    最近做了一个程序,里面一段代码用到Json.数组.Dictionary转换和数组对比的一些知识,虽然在实际碰到类似问题时候有更好的方法,但这就当是一次基础知识的回顾,现在分享一下. 先介绍下要实现的业 ...