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>";

Output Screenshot of Code 1 (bordered area) http://oi62.tinypic.com/1zfpmhe.jpg

代码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>";

Output Screenshot of Code 2 (bordered area) http://oi58.tinypic.com/15wezvk.jpg

知道为什么会出现同样的代码吗？

Answer 1

每次调用element.innerHTML +=后，浏览器都会更正任何不正确的HTML。

在你的情况下，你创建了以下html（由于<option>本身无效，因此无效。）

<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>

Answer 2

如果您正在创建一个不完整的选择，大多数浏览器将通过关闭选择html来纠正错误，以便渲染控件并使其具有正常选择对象属性等的DOM中的可访问对象。所以之后选项是单独附上。如果你检查生成的html，这就支持了这个理论。

从javascript发送“select”时出现奇怪的设计错误

2 个答案: