如何将JavaScript常量BusInfo数据插入HTML并设置CSS样式？

1. 准备HTML容器 #

首先在你的index.html里添加一个用于承载巴士信息的容器，放在<body>标签内的合适位置即可：

<div id="bus-container"></div>

2. 编写JavaScript渲染逻辑 #

在已引入的BusInfo脚本之后，添加一段脚本用来遍历巴士数据并插入到页面中：

// 确保DOM加载完成后再执行渲染
document.addEventListener('DOMContentLoaded', function() {
  const busContainer = document.getElementById('bus-container');
  
  // 遍历巴士信息数组，逐个生成条目
  BusInfo.forEach(bus => {
    const busItem = document.createElement('div');
    busItem.className = 'bus-item';
    
    // 填充巴士信息内容
    busItem.innerHTML = `
      <span class="bus-code">${bus.code}</span>
      <span class="bus-destination">前往 ${bus.destination}</span>
    `;
    
    // 将条目添加到容器中
    busContainer.appendChild(busItem);
  });
});

注意：这段脚本必须放在BusInfo脚本之后，或者用DOMContentLoaded事件包裹，避免出现找不到BusInfo变量或页面容器的问题。

3. 设置CSS样式 #

在<head>标签里添加<style>标签，或者引入外部CSS文件，给巴士信息添加样式：

#bus-container {
  max-width: 450px;
  margin: 30px auto;
  padding: 0 15px;
}

.bus-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin-bottom: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fafafa;
  transition: background-color 0.3s;
}

.bus-item:hover {
  background-color: #f5f5f5;
}

.bus-code {
  font-weight: 700;
  color: #2d3436;
  font-size: 1.2em;
}

.bus-destination {
  color: #636e72;
  font-size: 1em;
}

实现说明 #

• 渲染逻辑通过动态创建DOM元素的方式，把BusInfo中的每条数据转换成页面可见的内容；
• CSS样式通过类名精准控制元素外观，你可以根据需求修改颜色、间距、布局等属性；
• 如果需要表格形式的布局，可将单个巴士信息改为<tr>标签，容器用<table>，对应调整CSS即可。

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