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

2024-06-02 • 问答

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

print(new_df)
    color person            possible_crayons
0    blue   Jeff                [navy,aqua]
1   brown  Jenna                       [nan]
2   green   Mike        [forest green,pine]
3  purple  Marie  [periwinkle,royal purple]

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);

您可以在写入“ sol”时重新创建“ temp” divs

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,'z'] });

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

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

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

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

大家都在问