Javascript 元素名称更改恢复为原始名称

Question

JavaScript 克隆输入元素的名称更改 "terminal0" 不保存 and/or 在函数结束后恢复为原始名称。所有其他 name/id 更改都有效，但第一个元素名称更改会在函数完成后恢复。即使是第一个元素 "terminal0" id 更改也能成功。我已经通过在其末尾放置一个警报（cTerm.name）来测试并确认名称更改在函数退出之前确实有效。有谁知道名称更改对第一个输入元素不起作用的原因吗？

<tr id="tr1">
<td id="tr1Td0">
Terminal <input type="checkbox" name="terminal0" id="terminal0" value="0" onClick="cbUpdate()">
<br>
Imager <input type="checkbox" name="imager0" id="imager0" value="0" onClick="cbUpdate()">
</td>
</tr>
</tbody>
</table>

function addTable()
{
    var gssTable = document.getElementById("gssTable");
    var currTables = gssTable.rows[0].cells.length;
    var selNum = document.getElementById("sNum").value;
    var tr0 = document.getElementById("tr0");
    var tr1 = document.getElementById("tr1");
    var br = document.createElement('br');

    for(x=currTables; x < selNum; x++)
    {
        var tr0Td0 = tr0.insertCell(-1);
        var setID0 = document.getElementById("setID0");
        var cSetID = setID0.cloneNode(true);
        cSetID.id = "setID" + x;
        cSetID.name = "setID" + x;
        tr0Td0.appendChild(cSetID);

        var tr1Td0 = tr1.insertCell(-1);
        tr1Td0.innerHTML="Terminal";
        var terminal0 = document.getElementById("terminal0");
        var cTerm = terminal0.cloneNode(true);
        cTerm.id = "test" + x;
        cTerm.name = "test" + x;
        tr1Td0.appendChild(cTerm);
        tr1Td0.appendChild(br);
        tr1Td0.innerHTML = tr1Td0.innerHTML + "Imager"
        var imager0 = document.getElementById("imager0");
        var cImager = imager0.cloneNode(true);
        cImager.id = "imager" + x;
        cImager.name = "imager" + x;
        tr1Td0.appendChild(cImager);
    }

    while (currTables > selNum)
    {
        tr1.deleteCell(-1);
        tr0.deleteCell(-1);

        currTables = currTables - 1;
    }

Answer 1

设置 innerHTML 会使浏览器重新呈现该元素及其内容。由于您在循环的每次迭代中都这样做，因此您可能会导致竞争条件，其中 innerHTML 尚未更新为其上方的 appendChild 调用的最新效果。

因此，您不必每次都设置 innerHTML，只需创建一个 Text node, with createTextNode，然后将其附加即可。

tr1Td0.appendChild(document.createTextNode("Imager"));

Javascript 元素名称更改恢复为原始名称

Javascript element name change reverting back to original

javascript

dom

onchange