写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!
我想各位在很多网站上都看到过类似的效果!
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. 汇编语言_实验四_[bx]和loop的使用

    四.实验结论 1.       实验内容1 (1)源代码: assume cs:code code segment mov ax,0b800h mov ds,ax mov bx,07b8h mov c ...

  2. sort sorted() reverse() reversed() 的区别

    sort()是可变对象(字典.列表)的方法,无参数,无返回值,sort()会改变可变对象,因此无需返回值.sort()方法是可变对象独有的方法或者属性,而作为不可变对象如元组.字符串是不具有这些方法的 ...

  3. Java框架-mybatis03使用注解实现mybatis

    1.面向接口编程: 好处:扩展性好,分层开发中,上层不用管具体的实现,都遵循共同的标准,使得开发变得容易.规范性更好 2.注解的实现 a)编写Dao接口 public interface UserDa ...

  4. Js正则Replace方法

    JS正则的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\s+)|(\s+$)" ...

  5. 我的Python升级打怪之路【六】:面向对象(一)

    面向对象的概述 面向过程:根据业务逻辑从上到下写代码 函数式:将其功能代码封装到函数中,日后便无需编写,仅仅调用即可 [执行函数] 面向对象:对函数进行分类和封装.[创建对象]==>[通过对象执 ...

  6. spring mvc中DispatcherServlet如何得到ModelAndView的

    首先看下面这种张图,这张图说明了spring mvc整体的流程. 本文讲的就是如何从DispatcherServlet中得到ModerAndView的过程. 首先看DispatherServlet这个 ...

  7. 常用vue请求交互数据方式

    几种 vue的数据交互形式 var that=this get请求 that.$http.get("1.txt").then(function(result){ console.l ...

  8. OpenGL初识

    OpenGL 概念 OpenGL提供的是一系列接口, 它是指一个规范, OpenGL规范严格规定了每个函数该如何执行, 以及它们的输出值, 具体的实现是由各个显示设备厂商, 它作为本地系统库直接运行在 ...

  9. linq中where与skipwhile区别

    //字符串数组 string[] names = { "a1", "a2", "bcd","ab","bcde ...

  10. Make sure that the controller has a parameterless public constructor.

    An error occurred when trying to create a controller of type 'CCD.Web.Controllers.TWAccountControlle ...