Question

innerHTML += "<select onchange='sel()'><option>1</option><option>2</option></select>" 这样子可以

innerHTML += "<select onchange='sel()'><option>1</option><option>2</option></select>" 这样子可以现实下来选择框

innerHTML += "<select onchange='sel()'>"
innerHTML += "<option>1</option><option>2</option></select>" 为什么这样就不行了哎

Answer 1

当执行 innerHTML += "<select onchange='sel()'>" 后，元素里面被创建了一个 select 元素。
再执行 innerHTML += "<option>1</option><option>2</option></select>" 的时候，option 元素是被创建在之前的 select 元素之外的，最后一个 </select> 由于无法匹配，会被浏览器忽略掉。

innerHTML += "<select onchange='sel()'><option>1</option><option>2</option></select>"
这样的创建，会直接指明option是在select之中。

你可以使用firebug或chrome查看一下html的dom结构。

追问

那我有什么方法可以这样写成两行吗

追答

写成两行，浏览器会执行两次操作，而半个的标签要不就是被解析成一个，要不就是不解析。
你可以先创建select元素，然后再取得这个select元素对象，再在select中创建option。

Answer 2

应该是第二个把第一个替换掉了！