如何在JavaScript中结合fetch与JSON控制HTML元素的显示/隐藏及内容清空

• 当添加energyEl元素时，需隐藏/删除<ul class='star-list'>；energy不为true时，显示该列表。目前仅能实现全局统一隐藏/显示，无法按条件精准控制。
• JSON中energy为true时，需彻底移除所有评论内容。
• 若star和view字段为空，需清空review文本，不能保留空占位。

假设的JSON数据示例 #

{
  "energy": true,
  "star": "",
  "view": "",
  "comments": ["用户评论1", "用户评论2"]
}

常见问题原因 #

1. 若页面存在多个.star-list元素，未通过父容器关联对应元素，导致全局操作所有列表。
2. DOM元素获取时机过早（DOM未完全加载），导致无法正确定位元素。
3. 评论容器或review元素的清空逻辑不彻底，残留空文本或占位结构。

1. 精准控制.star-list的显示/隐藏 #

通过父容器定位对应列表元素，确保操作的是和energyEl关联的目标列表，同时确保DOM加载完成后执行代码：

document.addEventListener('DOMContentLoaded', () => {
  const data = /* 你的JSON数据 */;
  // 定位目标容器（假设energyEl和star-list同属一个父容器）
  const itemContainer = document.querySelector('.item-container');
  const starList = itemContainer.querySelector('.star-list');

  if (data.energy) {
    // 创建并插入energyEl
    const energyEl = document.createElement('div');
    energyEl.className = 'energy';
    energyEl.textContent = 'Energy标识';
    itemContainer.appendChild(energyEl);
    // 隐藏列表，若要永久删除可替换为 starList.remove()
    starList.style.display = 'none';
  } else {
    // 确保列表显示
    starList.style.display = 'block';
  }
});

2. energy为true时移除评论内容 #

直接定位评论容器并移除（或清空内容）：

const commentsContainer = document.querySelector('.comments-wrap');
if (data.energy) {
  // 彻底移除评论容器及内部内容
  commentsContainer.remove();
  // 若仅需清空内容，使用 commentsContainer.innerHTML = '';
} else {
  // 正常渲染评论
  commentsContainer.innerHTML = data.comments.map(comment => `<div class="comment">${comment}</div>`).join('');
}

3. 清空review文本（当star和view为空时） #

严格判断字段为空的情况，彻底清空文本：

const reviewEl = document.querySelector('.review');
// 判断star和view是否为空（包含空字符串、null、undefined）
const starIsEmpty = !data.star || data.star.trim() === '';
const viewIsEmpty = !data.view || data.view.trim() === '';

if (starIsEmpty && viewIsEmpty) {
  // 彻底清空文本，无残留
  reviewEl.textContent = '';
  // 若需移除元素本身，使用 reviewEl.remove();
} else {
  // 正常渲染内容，空字段显示"无"
  reviewEl.textContent = `评分：${data.star || '无'}，浏览量：${data.view || '无'}`;
}

完整可运行示例 #

document.addEventListener('DOMContentLoaded', () => {
  // 示例JSON数据
  const data = {
    "energy": true,
    "star": "",
    "view": "",
    "comments": ["用户评论1", "用户评论2"]
  };

  // 处理star-list与energyEl
  const itemContainer = document.querySelector('.item-container');
  const starList = itemContainer.querySelector('.star-list');
  
  if (data.energy) {
    const energyEl = document.createElement('div');
    energyEl.className = 'energy';
    energyEl.textContent = 'Energy元素';
    itemContainer.appendChild(energyEl);
    starList.style.display = 'none';
  } else {
    starList.style.display = 'block';
  }

  // 处理评论
  const commentsContainer = document.querySelector('.comments-wrap');
  if (data.energy) {
    commentsContainer.remove();
  } else {
    commentsContainer.innerHTML = data.comments.map(c => `<p class="comment-item">${c}</p>`).join('');
  }

  // 处理review文本
  const reviewEl = document.querySelector('.review');
  const starEmpty = !data.star || data.star.trim() === '';
  const viewEmpty = !data.view || data.view.trim() === '';

  if (starEmpty && viewEmpty) {
    reviewEl.textContent = '';
  } else {
    reviewEl.textContent = `评分：${data.star || '无'}，浏览量：${data.view || '无'}`;
  }
});

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