javascript - 从 javascript 发送 "select"时出现奇怪的设计错误

Question

我有两组代码，基本上是从 Javascript 向 div 发送一个下拉列表。

奇怪的是，我基本上在这两种情况下都发送了同样的东西。但在第一个代码中，选择下拉列表完美显示，而在第二个代码中，它被破坏了。

代码 1:

document.getElementById('start_day_div').innerHTML += "<select name='start_day' id='start_day'><option value='1'>option1</option><option value='2'>option2</option></select>";

代码 2:(基本上我发送的数据与代码 1 相同)

document.getElementById('start_day_div').innerHTML += "<select name='start_day' id='start_day'>";
document.getElementById('start_day_div').innerHTML += "<option value='1'>option1</option>";
document.getElementById('start_day_div').innerHTML += "<option value='2'>option2</option>";
document.getElementById('start_day_div').innerHTML += "</select>";

知道为什么相同的代码会发生这种情况吗？

Answer 1

每次调用 element.innerHTML += 后浏览器将更正任何不正确的 html。

在您的情况下，您创建了以下 html(它本身是无效的，因为 <option> 不能像那样 float 。)

<select name='start_day' id='start_day'></select>
<option value='1'>option1</option>
<option value='2'>option2</option>

如果你想做，你需要一次完成。如果你想更好地格式化它，连接一个 + :

document.getElementById('start_day_div').innerHTML += "<select name='start_day' id='start_day'>"
                                                   +  "<option value='1'>option1</option>"
                                                   +  "<option value='2'>option2</option>"
                                                   +  "</select>";

<div id="start_day_div"></div>