document.getElementById（“myId”）。InnerHTML找不到<div id =“myId”> </div>

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：无法设置属性＆＃39; innerHTML＆＃39;为null。 所以似乎JavaScript无法在那里找到div。通过删除div并将JS更改为getElementById（＆＃34; city_list_select＆＃34;），我能够解决这个问题，但是我还是想弄清楚为什么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之类的方法将新元素附加到现有元素。