Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 19:07:37
Original
1436 Leute haben es durchsucht

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


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage