前段時間因為域名關系網站停了一段時間。別的不多說了，我前端結合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

總結

以上是生活随笔為你收集整理的html5表单动态添加,js动态添加表单实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。