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

Question

我正在与美国宇航局洞察API合作。为什么我不能在"innerHtml“中插入"div.temp”呢？带有"div.sol“的div.sol工作得很好，但是"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>

​