javascript实现的动态添加表单元素input,button等(appendChild)

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

动态添加表单元素

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);
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js form action动态修改方法

    一般比较简单的就是document.formName.action="/dddd.do?ddd="+str document.formName.submit(); 写成函数式的调用就是 复制代码 代码如下: <script language="JavaScript" > function checkaction(v){ if(v==0){ document.dbform.action="index.php?admin_db-repair&quo

  • js动态生成form 并用ajax方式提交的实现方法

    Js代码: var tempForm = document.createElement("form"); tempForm.action="http://localhost:8080/test/user"; tempForm.method="post"; document.body.appendChild(tempForm); //create a submit button var tempInput = document.createElem

  • Js为表单动态添加节点内容的方法

    Js为表单动态添加节点内容的方法

    本文实例讲述了Js为表单动态添加节点内容的方法.分享给大家供大家参考.具体如下: 1. 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtm

  • JavaScript动态创建form表单并提交的实现方法

    本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f

  • JavaScript实现动态添加Form表单元素的方法示例

    本文实例讲述了JavaScript实现动态添加Form表单元素的方法.分享给大家供大家参考,具体如下: 之前写过类似的文章(如:javascript实现的动态添加表单元素input,button等),现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode.parentNode; objNode.cloneNode(); objNo

  • JavaScript实现动态增加文件域表单

    js代码: 复制代码 代码如下: <script language="javascript"> //全局变量,代表文件域的个数,并用该变量区分文件域的name属性 var file_count = 0; //增加文件 域 function additem(id) { if (file_count > 9) { alert("最u22810 10个u25991 件u22495 "); return; } //定义行变量row:单元格变量cell:单元

  • javascript写的一个表单动态输入提示的代码

    *{ margin:0px;padding:0px;font-size:12px; } input{ width:100px;height:20px;border:1px solid #ccc; } function tips(id,str){ var l=document.getElementById(id).offsetLeft+120; var t=document.getElementById(id).offsetTop; document.getElementById("tips&qu

  • javascript创建动态表单的方法

    本文实例讲述了javascript创建动态表单的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • 用JS动态改变表单form里的action值属性的两种方法

    方法1: <form id="form1" name="form1" method="post" action="../news/index.asp"> <table width="100%" height="43" border="0" cellpadding="0" cellspacing="0">

  • javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 复制代码 代码如下: var newInput = document.createElement("input"); 2.设定相关属性,如name,type等  复制代码 代码如下: newInput.type=mytype;   newInput.name="input1"

  • 使用bootstrapValidator插件进行动态添加表单元素并校验

    使用bootstrapValidator插件进行动态添加表单元素并校验

    一.前言 实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验.在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现.虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助. 思路:动态添加表单元素,并调用bootstrapV

  • vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    本文实例讲述了vue.js使用v-model实现表单元素(input) 双向数据绑定功能.分享给大家供大家参考,具体如下: v-model 一般表单元素(input) 双向数据绑定 el:'#box',//这里放的是选择器. 不然会不生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vu

  • javascript获取form里的表单元素的示例代码

    //获取form对象 var form=document.getElementById('my_form'); //用户名input对象 user_name是对象的name属性 var userName=form.user_name; //用户名清空 userName.value=''; //用户密码input对象 password是对象的name属性 var password=form.password; //用户密码清空 password.value=";

  • selenium中常见的表单元素操作方法总结

    selenium中常见的表单元素操作方法总结

    目录 前言 操作表单元素 常见的表单元素 行为链 Cookie操作 页面等待 切换页面 设置代理ip WebElement元素 总结 前言 selenium是浏览器自动化测试框架,是一个用于Web应用程序测试的工具,可以直接运行在浏览器当中,并可以驱动浏览器执行指定的动作,如点击.下拉.填充数据.删除cookie等操作,还可以获取浏览器当前页面的源代码,就像用户在浏览器中操作一样.该工具所支持的浏览器有IE浏览器.Mozilla Firefox以及Google Chrome等.selenium有

  • AngularJS使用指令增强标准表单元素功能

    AngularJS使用指令增强标准表单元素功能

    Angular 可使用指令无缝地增强标准表单元素的功能,我们将讨论它的优点,包括: 数据绑定.建立模型属性.验证表单.验证表单后反馈信息.表单指令属性 下面我们通过案例验证他们的用法: 一.双向数据绑定(ng-model)和建立模型属性 <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</ti

  • JavaScript实现表单元素的操作

    JavaScript实现表单元素的操作

    一.forms[]; Form 表单对象 document.forms[] 是一个数组,包含了文档中所有的表单(<form>).要引用单个表单,可以用 document.forms[x],但是一般来说,人们都会这样做:在<form>标记中加上“name="..."”属性,那么直接用 “document.<表单名>”就可以引用了. 1.属性 name 返回表单的名称,也就是<form name="...">属性. act

  • Javascript简单改变表单元素背景的方法

    本文实例讲述了Javascript简单改变表单元素背景的方法.分享给大家供大家参考.具体如下: 这里使用Javascript改变表单元素的背景,如改变文本框的背景 function colorChange(formName,formItem){ document.forms[formName.name].elements[formItem.name].style.backgroundColor = "#FFFFFF"; } 希望本文所述对大家的javascript程序设计有所帮助.

  • 解决layui追加或者动态修改的表单元素“没效果”的问题

    layui版本:2.2.6(考虑到一万年以后会有人遇到类似问题 先做个版本记录) 关于该问题的layui官方文档地址:http://www.layui.com/doc/modules/form.html 官方原文: 有些时候,你的有些表单元素可能是动态插入的.这时 Form模块 的自动化渲染是会对其失效的.虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行 form.render(type, filter); 方法即可. 代码样例 $.post('htt

随机推荐