本文介绍如何在使用 openweather api 构建天气应用时，避免多次查询导致的数据叠加问题——通过 javascript 在每次新请求前清空 dom 中的旧天气信息，实现无刷新、干净的界面更新。
本文介绍如何在使用 openweather api 构建天气应用时，避免多次查询导致的数据叠加问题——通过 javascript 在每次新请求前清空 dom 中的旧天气信息，实现无刷新、干净的界面更新。
在当前代码中，displayWeather() 和 displayForecast() 函数每次调用都会向 DOM 中追加（append() / prepend()） 新元素，而未移除之前渲染的内容，导致城市切换后页面堆叠多组天气数据。解决核心在于：在发起新请求前，主动清空相关容器节点的内容。
✅ 正确做法：添加 resetUI() 清理函数
在调用 fetchWeather(city) 和 fetchForecast(city) 之前，先执行清理操作：
function resetUI() {
// 清空主天气显示区域
header.innerHTML = '';
row.innerHTML = '';
info.innerHTML = '';
// 清空预报区域（注意：middle 是 forecast 的容器）
middle.innerHTML = '';
}
然后修改 handleClick 函数，确保每次查询前重置界面：
function handleClick(event) {
event.preventDefault();
const cityInput = document.getElementById("cityInput").value.trim();
if (!cityInput) return; // 防止空输入触发请求
resetUI(); // ? 关键：先清空旧内容
fetchWeather(cityInput);
fetchForecast(cityInput);
}
⚠️ 注意事项与优化建议
不要仅清空 input 值（如 cityInput.value = ""），这无法解决 DOM 累积问题；
避免重复创建/追加图标或文本节点：displayWeatherIcon() 中使用 row.prepend(icon) 会不断前置插入，应统一改为 row.innerHTML = '' 后再插入，或用 row.replaceChildren(icon)（现代浏览器支持）；
增强健壮性：为 header、row、info、middle 等 DOM 元素添加 id 或确保其唯一性，避免误删其他内容；
-
可选：添加加载状态提示：在 resetUI() 后显示 loading 占位符，提升用户体验：
function resetUI() { header.innerHTML = ''; row.innerHTML = '<p>Loading...</p>'; info.innerHTML = ''; middle.innerHTML = ''; }
✅ 最终效果
用户输入新城市 → 点击 Enter → 页面立即清空所有旧天气模块 → 获取并渲染新城市数据 → 无闪烁、无残留、无需刷新。
这种“清空→请求→渲染”的模式是单页应用（SPA）中处理动态内容更新的标准实践，既轻量又可靠，适用于各类基于 API 的实时数据展示场景。
