javascript - 添加新输入字段时如何保存现有输入字段中的值？

Question

这就是我的程序的主体:

<form id = "input">
<input id = "0" >
</form>

<p onclick = "add()"> Add Another</p>

点击上面的

会执行以下函数:

 var inputArea = document.getElementById("input");
        next = 1;
    function add(){

        inputArea.innerHTML+= "  <input id = " + next+ ">" ;

接下来是新输入字段的 ID。在这种情况下，由于 0 已经存在，因此 next 的值为 1。 我遇到的一个问题是，添加新的输入字段后，所有现有输入字段中的值都会丢失。如何保存这些值？我的尝试是将此代码放在函数 add() 中:

    for (i=0;i<next;i++)
    {inputs[i] = document.getElementById(i);
    inputV[i]= inputs[i].value;
inputs[i].value = inputV[i];}

但这不起作用..

      var inputArea = document.getElementById("input");
            next = 1;
        function add(){
            
            inputArea.innerHTML+= "  <input id = " + next+ ">" ;
       var inputs = new Array();
       var inputV = new Array();
       for (i=0;i<next;i++)
            {inputs[i] = document.getElementById(i);
            inputV[i]= inputs[i].value;
        inputs[i].value = inputV[i];}

        next++;
        }
     

<form id = "input">
        <input id = "0" >
        </form>
       
        <p onclick = "add()"> Add Another</p>

    

Answer 1

您可能想像这样动态地将元素添加到 DOM 树

function add() {
    var form = document.getElementById("input");
    var input = document.createElement("input");
    form.appendChild(input);
}

您所做的事情的问题是，当您在输入字段中写入时，所做的更改不会在HTML代码中表示，而仅在浏览器的内存中表示。因此，如果您将文本添加到 form.innerHTML 的代码中，浏览器将重新解释表单内的文本，这将是

<input id="0"> <input id="1"> ...

这将导致显示两个文本类型的空输入。

编辑:然后您可以通过添加您的 id 标签

function add() {
    var form = document.getElementById("input");
    var input = document.createElement("input");
    input.id = someValue;
    form.appendChild(input);
}

注意请以某种合乎逻辑的方式缩进您的代码。