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

【问题标题】：Cannot set .innerHTML of null even after DOM load即使在 DOM 加载后也无法将 .innerHTML 设置为 null
【发布时间】：2015-03-15 01:56:09
【问题描述】：

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

我可以将温度值注入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();
};

【问题讨论】：

标签： javascript html ajax innerhtml

【解决方案1】：

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

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;

【讨论】：

这是有道理的。我不知道 .innerHTML 直接替换了元素中的所有内容。谢谢！

【解决方案2】：

您通过设置#weatherBox 的innerHTML 删除了#current！天啊……

Ack，被打败了。

【讨论】：