如何将 API 数据动态注入 CSS 容器中并正确渲染_技术教程

本文详解如何将 javascript 获取的 api 响应数据（如天气信息）安全、规范地插入具有特定样式的 html 容器中，并解决常见布局与结构问题。

在前端开发中，将 API 返回的动态数据（如温度、气压、风速等）嵌入已定义样式的容器（如 .container）是常见需求。但关键在于：数据必须位于容器内部 DOM 结构中，且需通过 JavaScript 安全更新内容，而非静态硬编码或错误嵌套。

✅ 正确的 HTML 结构

首先，确保所有动态内容均包裹在 .container 的闭合标签内：

  METEO CHAVENAY
  -- °C (temperature)
  -- hPa (pression par rapport au niveau de la mer)
  -- km (visibilité horizontale)
  -- km/h (vitesse du vent)
  -- ° (direction du vent)
  -- % (couverture nuageuse)
  -- (Heure du lever du soleil)
  -- (Heure du coucher du soleil)
  -- H GMT

⚠️ 注意：原始代码中

..."temperature" 的双引号属于无效文本，不是合法 HTML 或 JS；应移除引号，仅保留占位符（如 --）或留空，由 JS 动态填充。

✅ CSS 补充建议（确保宽度生效）

.container 默认为块级元素，width: 200px 本可生效，但若因浮动、Flex 上下文或 inline 元素干扰导致失效，可显式添加：

.container {
  background-color: #fff;
  border-radius: 20px;
  padding: 100px 60px;
  width: 200px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, 
              rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  /* 关键修复：确保 width 可控 */
  display: inline-block; /* 或使用 display: block; + margin: auto; 居中 */
  box-sizing: border-box; /* 避免 padding 影响宽度计算 */
}

✅ JavaScript 动态注入 API 数据（安全示例）

使用 fetch 获取数据后，用 textContent（非 innerHTML）避免 XSS 风险：

async function loadWeatherData() {
  try {
    const res = await fetch('https://api.openweathermap.org/data/2.5/weather?q=Chavenay&appid=YOUR_KEY&units=metric');
    const data = await res.json();

    // 安全更新每个字段
    document.getElementById('temperature').textContent = Math.round(data.main.temp);
    document.getElementById('pressure').textContent = data.main.pressure;
    document.getElementById('visibility').textContent = (data.visibility / 1000).toFixed(1);
    document.getElementById('windspeed').textContent = Math.round(data.wind.speed * 3.6); // m/s → km/h
    document.getElementById('winddire').textContent = data.wind.deg || '—';
    document.getElementById('clouds').textContent = data.clouds.all;
    document.getElementById('sunrise').textContent = new Date(data.sys.sunrise * 1000).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
    document.getElementById('sunset').textContent = new Date(data.sys.sunset * 1000).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
    document.getElementById('timezone').textContent = (data.timezone / 3600).toFixed(0);

  } catch (err) {
    console.error('Failed to load weather:', err);
    document.querySelector('.container').innerHTML += '❌ Données indisponibles';
  }
}
loadWeatherData();