为什么我不能通过 Javascript 在嵌套的 div 中插入 html？

Question

我正在使用 Nasa Insight API。为什么我不能将 "innerHtml" 插入 "div.temp"？带有 "div.sol" 的 innerHtml 工作正常，但 "div.temp" 不...请帮助！

async function getMarsWeather() {
  const url = 'https://api.nasa.gov/insight_weather/?api_key= lYQZM29QeEW8Oe7Vjp7eYRna8ftZfK10JHVjqmma&feedtype=json&ver=1.0';

  return await (await fetch(url)).json();
}

function paintMarsData(marsData) {
  const sol = document.querySelectorAll('.sol');
  const temp = document.querySelectorAll('.temp');

  sol.forEach((sol, index) => sol.textContent = `Sol: ${ marsData.sol_keys[index] }`);
  temp.forEach((temp, index) => temp.innerHTML = `test ${ index }`);
}

getMarsWeather().then(paintMarsData);

<h1>Weather on Mars at Elysium Planitia</h1>

<div id="mars_weather">
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
</div>

Answer 1

您可以在写入 "sol"

时重新创建 "temp" div

function paintMarsData(marsData) {
  const sol = document.querySelectorAll('.sol');
  sol.forEach((sol, index) => sol.innerHTML = `Sol: ${ marsData.sol_keys[index] }<div class="temp"></div>`);

  const temp = document.querySelectorAll('.temp');
  temp.forEach((temp, index) => temp.innerHTML = `test ${ index }`);
}

//getMarsWeather().then(paintMarsData);
paintMarsData({ sol_keys: [1, 2, 3, 'z'] })

<h1>Weather on Mars at Elysium Planitia</h1>

<div id="mars_weather">
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
    <div class="sol"><div class="temp"></div></div>
</div>

或者您可以每次都重新创建父块的内容

function paintMarsData(marsData) {
  const div = document.getElementById('mars_weather');
  div.innerHTML = marsData.sol_keys.map((sol, index) => `<div class="sol">
        Sol: ${ sol } <div class="temp">test ${ index }</div>
  </div>`).join('')
}

//getMarsWeather().then(paintMarsData);
paintMarsData({ sol_keys: [1, 2, 3, 'z'] });

<h1>Weather on Mars at Elysium Planitia</h1>

<div id="mars_weather"></div>

为什么我不能通过 Javascript 在嵌套的 div 中插入 html？

Why can´t I insert html in a nested div via Javascript?

javascript

innerhtml

fetch