函数触发时DOM元素临时隐藏与恢复：双输出冲突修复问询

问题现状 #

调用getPlanets时，getCharacters的输出会被移除，但调用getCharacters时，getPlanets的输出仍保留在页面上，导致两个输出共存。之前尝试直接移除ctnPlanets容器，结果再次调用getPlanets时页面空白——因为容器已被删除，无法再渲染内容。

需求：激活任意函数时，另一个函数的输出立即消失，仅显示当前函数的内容，且支持反复切换。

解决方案代码 #

修改后的JavaScript代码 #

const ctnPlanets = document.getElementById("ctn-main");

async function getCharacters() {
  // 清空行星容器内容，确保切换时行星输出消失
  ctnPlanets.innerHTML = '';
  
  let square = document.getElementById("characters");
  // 复用已有的角色容器，不存在则创建
  if (!square) {
    square = document.createElement("div");
    square.setAttribute("id", "characters");
    document.body.append(square);
    square.style.cssText = "background-color: blue; width: 1200px; height: 1200px; margin: auto; margin-top: 2.5%; display: flex; flex-wrap: wrap; flex-direction: row";
  } else {
    // 清空旧内容，避免重复渲染
    square.innerHTML = '';
  }

  // 改用async/await简化异步逻辑
  const filmsData = await fetch("https://swapi.dev/api/films/2/").then(res => res.json());
  for (const url of filmsData.characters) {
    const character = await fetch(url).then(res => res.json());
    const wrapper = document.createElement("div");
    wrapper.style.cssText = 'width: 250px; height: 200px; margin: auto; margin-top: 5.5%;';
    wrapper.innerHTML = `
      <div>
        <h1>${character.name}</h1>
        <h3><p>Birth Year: ${character.birth_year}</p></h3>
        <p>Gender: ${character.gender}</p>
      </div>
    `;
    square.append(wrapper);
  }
}

async function getPlanets() {
  // 移除角色容器，确保切换时角色输出消失
  const charactersContainer = document.getElementById("characters");
  if (charactersContainer) {
    charactersContainer.remove();
  }

  document.querySelector('.overlay').classList.add('active');
  // 补充URL_Planets的实际接口地址
  const results = await fetch("https://swapi.dev/api/planets/");
  const data = await results.json();
  const nextPlanets = data.next;
  const previousPlanets = data.previous;
  const planets = data.results;
  let outPut = '';

  document.querySelector('.overlay').classList.remove('active');
  planets.forEach(item => {
    outPut += `
      <div class="card card-planet">
        <h2>${item.name}</h2>
        <h5>Climate: ${item.climate}</h5>
        <h5>Terrain: ${item.terrain}</h5>
        <h5>Population: ${item.population}</h5>
      </div>
    `;
  });
  // 向固定容器插入内容，容器不会被删除，可反复使用
  ctnPlanets.innerHTML = outPut;
}

HTML代码（无需修改） #

<main id="main">
  <div id="ctn-main" class="ctn"></div>  
</main>

关键修改说明 #

1. 对称清理逻辑：
   • 调用getCharacters时，清空ctnPlanets的内容（行星的固定容器），确保行星输出消失；
   • 调用getPlanets时，移除characters容器（角色的临时容器），确保角色输出消失。
2. 复用容器避免丢失：
   • 行星始终使用固定的ctn-main容器，仅清空内容而非删除容器，保证后续调用可继续使用；
   • 角色容器如果已存在则复用并清空旧内容，避免重复创建DOM元素。
3. 优化异步代码：将链式then改为async/await，逻辑更清晰易维护。

内容的提问来源于stack exchange，提问作者Egisto1987