demo 2015-12-14 1849次浏览

1、今天准备做一个api验证的页面,在js上遇到这样一个问题:

blob.png

如图:当点击添加参数后,需要动态的添加一栏参数输入框,一开始我用代码是这样的:

document.getElementById('params').innerHTML=inner+'<div class="form-group"><label class="col-sm-2 control-label" style="padding-top: 5px;"></label><div class="col-sm-5"><input name="param[]" maxlength="300" class="form-control" placeholder="参数名"></div><div class="col-sm-5"><input name="value[]" maxlength="300" class="form-control" placeholder="参数值"></div></div>';

但是这样写的话会遇上一个问题,比如说,已经输入一栏参数数据了,但发现栏数不够,需要新增一栏,但点击添加参数后以前添加的参数数据就消失了。后台经过百度后,找到这样一种做法,js可以实现动态的添加html数据且不修改已添加html内容的数据:

var div = document.createElement("div");
div.innerHTML = '<div class="form-group"><label class="col-sm-2 control-label" style="padding-top: 5px;"></label><div class="col-sm-5"><input name="param[]" maxlength="300" class="form-control" placeholder="参数名"></div><div class="col-sm-5"><input name="value[]" maxlength="300" class="form-control" placeholder="参数值"></div></div>';
document.getElementById('params').appendChild(div);