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：无法将属性“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将新元素附加到现有元素的方法。