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

Question

I am working with the Nasa Insight API. Why cant I insert the "innerHtml" into the "div.temp"? The innerHtml with the "div.sol" works fine, but the "div.temp" does not... Please help!

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

You can recreate "temp" divs when writing to "sol"

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>

Or you can recreate parent block's content each time

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>