javascript - 即使在 DOM 加载后也无法将 .innerHTML 设置为 null

Question

我不断收到错误“无法将 .innerHTML 设置为 null”。我也尝试过在最后一个正文标记之前链接脚本。我始终使用双引号，所有内容都拼写正确，并且脚本运行。我注意到 WeatherBox div 中的两个 div 仍未加载。它们不会出现在开发工具中。

我可以将温度值注入(inject)到weatherBox div中，然后它就会显示出来。但这不是我想要的。

HTML:

<p>Stuff should load here:</p>
<div id="weatherBox">
    <div id="current"></div>
    <div id="forecast"></div>
</div>

JS:

window.onload = function() {
var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function(){
    if(myRequest.readyState === 4){
        if(myRequest.status ===200){
        document.getElementById("weatherBox").innerHTML = "load success. see console.";
        var weather = JSON.parse(myRequest.responseText);
        console.log(weather);
        document.getElementById("current").innerHTML = weather.current_observation.feelslike_f;

        } 
    }
};

myRequest.open("GET", "http://api.wunderground.com/api/ceb5d155ada684a6/forecast/geolookup/conditions/q/WI/Oshkosh.json");

myRequest.send();
};

Answer 1

问题是，当你设置innerHTML时上<div id="weatherBox"> ，您将完全替换内容。

document.getElementById("weatherBox").innerHTML = "load success. see console.";

<div id="current"></div>元素从 <div id="weatherBox"> 中删除.

<div id="weatherBox">
    <div id="current"></div>
    <div id="forecast"></div>
</div>

然后，当您在删除该元素后尝试访问该元素时，会失败。

document.getElementById("current").innerHTML = weather.current_observation.feelslike_f;