javascript - innerHTML 可以跨不同行工作吗？

Question

我尝试使用innerHTML 根据用户的输入创建一个下拉列表，但它不起作用。下面的代码输出一个空的下拉列表。问题似乎是 split <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，试图通过添加结束标记来使其“正确”。不要重复将不完整的标签集附加到 .innerHTML 并强制进行可能昂贵的回流/重绘，而是将您的选择构建为字符串，然后在完成后将其附加到 .innerHTML:

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