动态注入API数据实现天气展示容器

  
METEO CHAVENAY
  
Température : — °C
  
Pression : — hPa
  
Visibilité : — km
  
Vitesse du vent : — km/h
  
Direction du vent : — °
  
Couverture nuageuse : — %
  
Lever du soleil : —
  
Coucher du soleil : —
  
Fuseau horaire : — GMT

✅ 关键改进说明：

• 所有 id 元素均作为 .container 的直接子元素或后代，确保 CSS 规则（如 padding、border-radius、box-shadow）完整生效；
• 使用 包裹待替换值（如 —），语义清晰，便于 JS 精准定位与更新；
• 移除冗余双引号（如 "temperature"），避免文本误渲染为字面量；
• 添加 display: inline-block 并非必需——.container 已设固定 width: 200px，且默认 display: block 完全适用；若需水平排列多个容器，才考虑 inline-block 或更现代的 display: flex。

接下来，使用 JavaScript 安全注入 API 数据（示例基于 fetch）：

// 模拟 API 响应（实际项目中替换为真实端点）
const mockApiData = {
  temperature: 18.4,
  pressure: 1013,
  visibility: 10,
  windspeed: 12.5,
  winddire: 220,
  clouds: 40,
  sunrise: "07:22",
  sunset: "20:45",
  timezone: "+2"
};

// 安全更新 DOM（防止 XSS，仅插入纯文本）
function updateWeatherData(data) {
  Object.keys(data).forEach(key => {
    const el = document.getElementById(key);
    if (el) el.textContent = data[key]; // 使用 textContent 而非 innerHTML，防 XSS
  });
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  updateWeatherData(mockApiData);
});

⚠️ 重要注意事项：

• 永远优先使用 textContent 而非 innerHTML 更新纯文本字段，避免潜在的 XSS 风险；
• 若 API 返回 HTML 片段（极不推荐），须经严格白名单过滤后才可使用 innerHTML；
• 为提升可访问性（a11y），建议为数值添加 aria-label（如 18.4）；
• 生产环境务必添加错误处理与加载状态（如骨架屏或 loading 文本），提升用户体验。

最后，CSS 可进一步优化以增强响应性与可读性：

.container {
  background-color: #fff;
  border-radius: 20px;
  padding: 24px;
  width: 280px; /* 微调宽度以容纳标签+数值 */
  box-shadow: 
    rgba(50, 50, 93, 0.25) 0 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0 3px 7px -3px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}
.container h2 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1.3rem;
}
.container div {
  margin-bottom: 8px;
  font-size: 0.95rem;
}
.container strong {
  color: #34495e;
  margin-right: 6px;
}

总结：API 数据集成不是“拼接字符串”，而是结构化 DOM 操作 + 语义化标记 + 安全更新策略的组合实践。从基础 HTML 嵌套规范起步，再逐步引入异步请求、错误边界与无障碍支持，方能构建健壮、可维护的动态数据容器。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《动态注入API数据实现天气展示容器》文章吧，也可关注golang学习网公众号了解相关技术文章。