html5表单动态添加,js动态添加表单实例

前段时间因为域名关系网站停了一段时间。别的不多说了，我前端结合php做一个批量建栏目的模块，用到这个

对了下点，这个添加input动态添加 name也是可设成不同有，我用的是“text”+(1-100)之间的随机数字。最好就循环。这个好控制一下。

下面看一下HTML代码部分：/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题页

*{ padding:0px; margin:0px;}

.box{ width:170px; height:auto; margin:0px auto;

border:solid 1px #333333; margin-top:50px;

overflow:hidden;}

.kz{ width:100%; text-align: center;

line-height:30px; height:30px;

background:#999999;}

input{ display:inline;

margin-top:5px;}

#con{ text-align:center;

padding:5px 0px;}

οnclick="app()" value="添加" />

value="删除" />

再看一下javascript：

var con=document.getElementById("con");

function app(){

var nu=Math.floor(Math.random() * (100-1)+1); //获取随机数字

var input=document.createElement("input"); //创建input标签

var br=document.createElement("br"); //

input.setAttribute("type","text");

input.setAttribute("name","text"+nu);

con.appendChild(input);

con.appendChild(br);

}

function del(){

var input=con.getElementsByTagName("input");

var br=con.getElementsByTagName("br");

var inputnu=input.length;

if(inputnu=="0"){

alert("不需要删除");

return;

}

con.removeChild(input[inputnu-1])

con.removeChild(br[inputnu-1])

}

这里主要用了dom的创建节点和创建节点属性、删除节点的函数。

document.createElement(

"input"

);  //创建input标签

setAttribute("type"

,

"text"

);//

创建属性

con.removeChild(input[inputnu-1])  //删除节点

主要是这几个，别的大家可以看一下，反正很简单下面看一下DEMO