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

    1.chgrp(改变文件所属用户组) chgrp 用户组    文件名    ###就是这个格了.如果整个目录下的都改,则加-R参数用于递归. 如:chgrp  -R    user  smb.con ...

  2. Django 配置访问静态文件

    1.settings.py 首先在 settings 文件中,引用 os 模块: import os   定义根目录: BASE_DIR = os.path.dirname(os.path.dirna ...

  3. 使用discover批量执行用例

    TestLaoder 该类负责根据各种条件加载测试用例,并将它们返回给测试套件,正常情况下,不需要创建这个类的实例,unittest提供了可以共享的defaultTestLoader类,可以使用其子类 ...

  4. MySQL 主重复 时时

    MySQL .7开启Enhanced Multi-Threaded Slave配置: #slave slave-parallel-type=LOGICAL_CLOCK slave master_inf ...

  5. java实现任务调度

    最近的一个小项目是做一个简单的数据仓库,需要将其他数据库的数据抽取出来,并通过而出抽取成页面需要的数据,以空间换时间的方式,让后端报表查询更快. 因为在抽取的过程中,有一定的先后顺序,需要做一个任务调 ...

  6. (C++学习)关于CString的一些疑问

    #include <iostream> #include <string> #include <afx.h> #include <vector> usi ...

  7. 第1天:jQuery效果

    1.jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...

  8. nodejs时间工具类

    /** * * @fmt 格式化字符串 * @Date 为需要格式化的日期 * * 示例:format(new Date(),'yyyy-MM-dd hh:mm:ss'); * 返回值为字符串 */ ...

  9. 购物车之CheckBox所有事件

    html 主要是循环

  10. 使用itext导出pdf

    导出pdf这个功能是在工作中遇到的,写这个功能的时候遇到了不少的问题,比如中文乱码,不显示的问题,这些问题在我不断的测试,研究后都一一解决了. 第一步,先导入所需要的jar包 第一个jar包是用于解决 ...