使用JS的多个输入字段答案

【问题标题】：Multiple input fields using JS使用JS的多个输入字段
【发布时间】：2013-11-21 17:28:54
【问题描述】：

得到以下JS代码：

<script language="javascript">
fields = 0;
pNR = 0;
err = 0;

function addInput() {
    if (fields != 40) {
        document.getElementById('text').innerHTML += "<input type='text' name='first" + pNR + "' value='' /><input type='text' name='second" + pNR + "' value='' /><br />";
        fields += 1;
        pNR += 1;
    } else {
        if (err == 0) {
            document.getElementById('text').innerHTML += "<br />Adaugati maxim 40 ingrediente.";
            err = 1;
        }
        document.form.add.disabled = true;
    }
}
</script>

以及以下 HTML：

<input name="name" style="color:#ffffff;" class="name required" type="button" onclick="addInput()" value="Add" />   

<div id="text">
</div>

默认情况下，没有字段。当我按下“添加”按钮（字段以不同的名称两个两个添加）时，填写字段并再次单击“添加”按钮，填充的字段被清空。我做错什么了？

【问题讨论】：

看这个：stackoverflow.com/questions/595808/…

标签： javascript field

【解决方案1】：

您不只是添加新的输入。

你是：

将现有的转换为 HTML（value 属性不变，它仍然具有 default 值，而不是当前值）
为新输入添加 HTML
从该 HTML 生成新的 DOM 元素。

不要使用innerHTML。使用createElement、appendChild 和朋友。

这个：

document.getElementById('text').innerHTML += "<input type='text' name='first" + pNR + "' value='' /><input type='text' name='second" + pNR + "' value='' /><br />";

变成这样：

var firstInput = document.createElement("input");
var secondInput = document.createElement("input");

firstInput.type = secondInput.type = "text";
firstInput.name = "first" + pNR;
secondInput.name = "second" + pNR;

var text = document.getElementById("text");
text.appendChild(firstInput);
text.appendChild(secondInput);
text.appendChild(document.createElement("br"));

对于else 案例：

var text = document.getElementById("text");
text.appendChild(document.createElement("br"))
text.appendChild(document.createTextNode("Adaugati maxim 40 ingrediente."));

工作示例：http://jsbin.com/OqIWeMum/2/edit

【讨论】：