无法读取null JS的属性'appendChild'

Question

我的JS代码有问题。

我不断收到以下错误

未捕获的TypeError：无法读取null的属性'appendChild'

JS代码：

    const weatherIcon = document.getElementById('weather-icon');

    const icon = document.createElement('img');
    icon.setAttribute('id', 'icon');
    icon.src = "http://openweathermap.org/img/w/50n.png";
    console.log(icon);
    weatherIcon.appendChild(icon);    //error is on this line

<div id="weather-data">
          <div id="weather-icon">
              
            </div>
    </div>

Answer 1

您的脚本可能在DOM完全加载之前正在执行。尝试使用DOMContentLoaded。这将确保仅在DOM完全加载后才执行内部代码。

document.addEventListener('DOMContentLoaded', function(){
  const weatherIcon = document.getElementById('weather-icon');

  const icon = document.createElement('img');
  icon.setAttribute('id', 'icon');
  icon.src = "http://openweathermap.org/img/w/50n.png";
  console.log(icon);
  weatherIcon.appendChild(icon);
});

<div id="weather-data">
  <div id="weather-icon"></div>
</div>