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> 

 

 

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

转载于:https://www.cnblogs.com/firstdream/p/4518879.html