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

写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!
我想各位在很多网站上都看到过类似的效果!
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> <BR>function AddElement(mytype){ <BR>var mytype,TemO=document.getElementById("add"); <BR>var newInput = document.createElement("input"); <BR>newInput.type=mytype; <BR>newInput.name="input1"; <BR>TemO.appendChild(newInput); <BR>var newline= document.createElement("br");//创建一个BR标签是为能够换行！ <BR>TemO.appendChild(newline); <BR>} <BR></script> 

<title>动态添加表单元素</title> <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"); TemO.appendChild(newline); } </script><form action="" method="get" name="frm"> <div id="add"> <input type="text" name="textfield"> </div> </form> <input name="" type="button" value="新建文本框" onclick="AddElement('text')"><input name="" type="button" value="新建复选框" onclick="AddElement('checkbox')"><input name="" type="button" value="新建单选框" onclick="AddElement('radio')"><input name="" type="button" value="新建文件域" onclick="AddElement('file')"><input name="" type="button" value="新建密码框" onclick="AddElement('password')"><input name="" type="button" value="新建提交按钮" onclick="AddElement('submit')"><input name="" type="button" value="新建恢复按钮" onclick="AddElement('reset')">
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

Java免费学习笔记：立即学习
解锁 Java 大师之旅：从入门到精通的终极指南