动态生成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有四个特性：

扫描二维码关注公众号，回复： 108140 查看本文章

1.     beforeBegin: 插入到标签开始前

2.     afterBegin:插入到标签开始标记之后

3.     beforeEnd:插入到标签结束标记前

4.     afterEnd:插入到标签结束标记后