动态生成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:插入到标签结束标记后