JavaScript动态生成Bootstrap卡片：API数据展示的实践指南

<div class="card" style="width: 18rem;">   <img src="..." class="card-img-top" alt="...">   <div class="card-body">     <h5 class="card-title">卡片标题</h5>     <p class="card-text">一些快速示例文本，用于构建卡片的内容。</p>     <a href="#" class="btn btn-primary">前往</a>   </div> </div>

function updateResults(data, userLocation) {   const resultsContainer = document.getElementById("results-container");   const mapContainer = document.getElementById("map-container");    // 清除任何现有的结果   resultsContainer.innerHTML = "";    // 初始化地图（此处省略具体实现）   initMap(userLocation, mapContainer, data.businesses);    // 遍历搜索结果并为每个结果创建html元素   data.businesses.forEach(result => {     // 1. 创建卡片主容器     const resultElement = document.createElement("div");     resultElement.className = 'card mb-3'; // 添加 'card' 类和 'mb-3' (margin-bottom) 以提供间距     resultElement.style.width = '18rem'; // 设置卡片宽度，可根据需要调整或使用Bootstrap网格系统      // 2. 创建图片元素并添加卡片图片类     const imageElement = document.createElement("img");     imageElement.src = result.image_url;     imageElement.className = 'card-img-top'; // 添加 'card-img-top' 类     imageElement.alt = result.name; // 添加 alt 属性以提高可访问性     imageElement.style.height = "180px"; // 示例高度，可调整     imageElement.style.objectFit = "cover"; // 保持图片比例覆盖区域      // 3. 创建卡片主体内容容器     const cardBody = document.createElement('div');     cardBody.className = 'card-body'; // 添加 'card-body' 类      // 4. 创建标题元素并添加卡片标题类     const nameElement = document.createElement("h5"); // 使用 h5 作为卡片标题     nameElement.className = 'card-title'; // 添加 'card-title' 类     const nameLink = document.createElement("a");     nameLink.href = result.url;     nameLink.target = "_blank"; // 在新标签页打开链接     nameLink.innerText = result.name;     nameElement.appendChild(nameLink);      // 5. 创建其他信息段落，并添加到卡片主体     const addressElement = document.createElement("p");     addressElement.className = 'card-text'; // 可选：添加 'card-text' 类     addressElement.innerText = result.location.display_address.join(", ");      const distanceElement = document.createElement("p");     distanceElement.className = 'card-text';     if (result.distance_data && result.distance_data.distance) {       distanceElement.innerText = `${result.distance_data.distance.text} 英里`;     }      const durationElement = document.createElement("p");     durationElement.className = 'card-text';     if (result.distance_data && result.distance_data.duration) {       durationElement.innerText = `${result.distance_data.duration.text} 分钟`;     }      const priceElement = document.createElement("p");     priceElement.className = 'card-text';     priceElement.innerText = `价格: ${result.price || 'N/A'}`;      const ratingElement = document.createElement("p");     ratingElement.className = 'card-text';     ratingElement.innerText = `评分: ${result.rating} 星`;      // 6. 将所有子元素组装到卡片中     resultElement.appendChild(imageElement); // 图片先于 card-body     cardBody.appendChild(nameElement);     cardBody.appendChild(addressElement);     cardBody.appendChild(distanceElement);     cardBody.appendChild(durationElement);     cardBody.appendChild(priceElement);     cardBody.appendChild(ratingElement);     resultElement.appendChild(cardBody); // 将 card-body 添加到卡片主容器      // 7. 将完整的卡片添加到结果容器     resultsContainer.appendChild(resultElement);   }); }