javascript - document.getElementById ("myId").InnerHTML 找不到

Question

我在使用某些 JavaScript 代码时遇到了这个问题。我在下面的错误中简化了它，因为我已经能够通过调试查明问题。

HTML:

<select id="city_list_select" name="city">
    <div id="clist">
        <option>Select a Region First</option>
    </div>
</select>

JavaScript:

document.getElementById("clist").innerHTML = "<option>Test</option>";

我收到此错误返回:TypeError:无法设置 null 的属性“innerHTML”。所以 JavaScript 似乎无法在那里找到那个 div 。我可以通过删除 div 并将 JS 更改为 getElementById("city_list_select") 来解决这个问题，但我仍然想弄清楚为什么 div 不起作用，以防我将来遇到类似的问题.

Answer 1

嗯...我认为 SELECT 标签内不能有 DIV 标签。尝试使用 OPTION 标记，或者正如您所发现的，使用 SELECT 标记的innerHTML 替换所有 OPTION 标记。

<select id="city_list_select" name="city">            
  <option id="option1">Select a Region First</option>     
</select>

并且不要忘记，您还可以使用 appendChild 等方法将新元素附加到现有元素。