Question

我正在尝试使用innerHTML从用户的输入创建一个下拉列表，但它不起作用。下面的代码输出一个空的下拉列表。问题似乎是在单独的行上分割<select>和<option>。如果我将<select>和</select>放在for循环中，它会起作用，但它会为每个项目创建一个单独的下拉列表。有什么想法吗？

document.getElementById('text').innerHTML += "<select>";
for (ddNum=0; ddNum <= ddWanted; ddNum++)
{
var ddIDvar = document.getElementById('inputID' + ddNum);
document.getElementById('text').innerHTML += "<option>" + ddIDvar.value + "</option>";
}
document.getElementById('text').innerHTML += "</select><br />";

Answer 1

浏览器可能正在捏造您正在添加的HTML，尝试通过添加结束标记使其“正确”。而不是反复将不完整的标记setes附加到.innerHTML并强制进行可能昂贵的重排/重绘，将select构建为字符串，然后在完成后将其附加到.innerHTML：

var sel = '<select>';
for (ddNum ...) {
   sel += '<option>....</option>';
}
sel += '</select>';
.... .innerHTML += sel;

Answer 2

您无法将innerHTML设置为HTML标记的一半如果你尝试，浏览器会为你修复它，这不是你想要的。

您需要汇编完整的HTML字符串，然后设置innerHTML。

Answer 3

每次更改innerHTML的值时都会触发重排，这对性能不利。相反，提前构建HTML字符串并编写innerHTML一次：

var s = document.getElementById('text').innerHTML + "<select>";
for (ddNum=0; ddNum <= ddWanted; ddNum++)
{
    var ddIDvar = document.getElementById('inputID' + ddNum);
    s += "<option>" + ddIDvar.value + "</option>";
}
document.getElementById('text').innerHTML = s + "</select><br />";

innerHTML是否跨越不同的行？

3 个答案: