動態生成input輸入框

最近寫項目須要實現一個動態生成input功能。本來覺得很簡單，只須要在前端js中寫一個方法，拼接一個字符串經過innerHTML添加至html。

代碼以下：

for(var i=0;i<3;i++){
             j=i+1;
             var name="製件"+j;
             var value="value"+i;
             var str=name+"：<input type='text' name='"+value+"' value='' class='form-control'>"
             a=a+str;
             
         }

document.getElementById("id").innerHTML=a;

後來提出新的要求，須要動態添加若干個input。將innerHTML換成insertAdjacentHTML。

 

for(var i=0;i<3;i++){
             j=i+1;
             var name="製件"+j;
             var value="value"+i;
             var str=name+"：<input type='text' name='"+value+"' value='' class='form-control'>"
             a=a+str;
             
         }

document.getElementById("work").insertAdjacentHTML('beforeBegin',a);

使用innerHTML後，持續添加時會將上次添加的內容替換掉。

insertAdjacentHTML能夠在上次的內容基礎上持續添加。

insertAdjacentHTML有四個特性：

1.     beforeBegin: 插入到標籤開始前

2.     afterBegin:插入到標籤開始標記以後

3.     beforeEnd:插入到標籤結束標記前

4.     afterEnd:插入到標籤結束標記後