Javascript 保留文本框的值，修改元素后选择

我有一个HTML表格

<table>
<tr>
    <td>
        Players
    </td>
    <td id="positions"></td>
</table>

球员

用户可以按下一个按钮，它会将dropbox和textbox连接到td

职位

用户可以在dropbox和textbox中设置值，然后向其中添加另一个播放器

然而，一旦他添加了一个新元素，旧dropbox和textbox中的值就会被重置。有可能保留它们吗

addPosition函数：

function addPosition (){
    var toDisplay = "";

    toDisplay += "<input type='number'>";
    toDisplay += "<select><option value='back'>Back</option><option value='front'>Front</option></select>";

    document.getElementById("positions").innerHTML += toDisplay; 
}

函数addPosition（）{
var toDisplay=“”；
显示+=“”；
toDisplay+=“BackFront”；
document.getElementById（“positions”）.innerHTML+=toDisplay；
}

可能会使用HTML5数据元素（或cookies/session，如果这不是一个选项）？

您应该使用和DOM元素，而不是替换父级的HTML：

function addPosition() {
    var input = document.createElement("input");
    input.type = "number";
    var select = document.createElement("select");
    select.innerHTML = "<option value='back'>Back</option><option value='front'>Front</option>";
    var positions = document.getElementById("positions");
    positions.appendChild(input);
    positions.appendChild(select);
}

函数addPosition（）{
var输入=document.createElement（“输入”）；
input.type=“number”；
var select=document.createElement（“select”）；
select.innerHTML=“BackFront”；
var positions=document.getElementById（“positions”）；
位置。追加子项（输入）；
位置。追加子项（选择）；
}

（另外，您缺少一个结束语

）

更好的方法是，使用以下工具提高性能：

function addPosition() {
    var fragment = document.createDocumentFragment();
    var input = document.createElement("input");
    input.type = "number";
    var select = document.createElement("select");
    select.innerHTML = "<option value='back'>Back</option><option value='front'>Front</option>";
    fragment.appendChild(input);
    fragment.appendChild(select);

    document.getElementById("positions").appendChild(fragment);
}

函数addPosition（）{
var fragment=document.createDocumentFragment（）；
var输入=document.createElement（“输入”）；
input.type=“number”；
var select=document.createElement（“select”）；
select.innerHTML=“BackFront”；
appendChild（输入）；
appendChild（select）；
document.getElementById（“位置”）.appendChild（片段）；
}

---

您应该在DOM中创建一个选项元素，并将其添加到列表中，如：

var oSelect = document.getElementById("positions");
var oOption = document.createElement("option");
oOption.text = "Next option";
oSelect.add(oOption);

---

是的，因为当您设置这些值时，javascript不会记住它们。您需要以某种方式存储/恢复这些值