javascript - 定义为在命令中输入更多值的添加按钮正在删除所有现有值，有没有办法避免这种情况？

Question

"use strict"
let count=0;

addbutton=document.getElementById('addBoxes');
form=document.getElementById('inputs');
addbutton.onclick=function(){
    count++;
    form.innerHTML+='<input type="text" name="pid'+count+'"><br><br>'
}

<form id='inputs' action="/project_details" method="POST">
    <label>Project ID</label><br>
    <input type="text" name="pid"><br><br>
    <br><button>submit</button><br>
</form>
<button type="button" id="addBoxes">add</button>

因此添加按钮允许代码使用 JS 添加更多输入值，但每次我单击添加时，它都会带走现有值。

例子:

输入ABCD

按添加

现在屏幕会显示2个空的输入框

---

还有一种方法可以让我更好地放置提交按钮，因为当我添加输入值时，它会显示在提交按钮旁边，而不是将其按下。

Answer 1

与其添加到表单的 innerHTML，不如使用 appendChild:

let count=0;

    addbutton=document.getElementById('addBoxes');
    form=document.getElementById('inputs');
    addbutton.onclick=function(){
        count++;
        let newChild = document.createElement("input")
        newChild.setAttribute("type", "text");
        newChild.setAttribute("name", "pid"+count);
        
        form.appendChild(newChild);
    }

<form id='inputs' action="/project_details" method="POST">
    <label>Project ID</label><br>
    <input type="text" name="pid"><br><br>
    <br><button>submit</button><br>
</form>
<button type="button" id="addBoxes">add</button>     

如果你想在输入后追加而不搞砸按钮的位置，正如你提到的:

let count=0;

addbutton=document.getElementById('addBoxes');
form=document.getElementById('inputs');
addbutton.onclick=function(){
    let refNode = document.getElementsByName("pid"+count);
    count++;
    let newChild = document.createElement("input")
    newChild.setAttribute("type", "text");
    newChild.setAttribute("name", "pid"+count);
    
    refNode[0].parentNode.insertBefore(newChild, refNode[0].nextSibling);
}

<form id='inputs' action="/project_details" method="POST">
        <label>Project ID</label><br>
        <input type="text" name="pid0"><br><br>
        <br><button>submit</button><br>
</form>
<button type="button" id="addBoxes">add</button>