js动态添加input输入框值消失解决办法

近日，在开发一个需要动态添加输入框操作时，发现在使用innerHTML动态添加某个input输入框后，在里面输入值，再添加一个input输入框，上一个输入框添加的值消失了，百思不得其解。

经过查询后才知道innerHTML方法返回的是该元素的HTML标记，而不是该元素的值。我们需要在input输入值的时候，设置input值的属性。相关代码如下：

var html = '<div id="attrItem'+ idLen +'">名称：<input name="attrTitle[]" id="attrTitle'+ idLen +'" type="text" size="10" maxlength="10" value="" onchange="onChangeVal(this)" />&nbsp;&nbsp;标记：<input name="attrName[]" id="attrName'+ idLen +'" type="text" size="10" maxlength="10" value="" onchange="onChangeVal(this)"/>&nbsp;&nbsp;类型：<select name="attrType[]" id="attrType'+ idLen +'"><option value="text">文本框</option><option value="editor">编辑器</option></select>&nbsp;&nbsp;<a href="javascript:delAttrItem('attrItem'+ idLen +'')">删除</a></div>';
document.getElementById("idAttrItem").innerHTML += html;

function onChangeVal(e) {
  e.setAttribute("value", e.value);
}