如何通过遍历列表生成指定的HTML按钮？

Got it! 要实现遍历列表生成你需要的这些按钮，我给你几个实用的方案，适配不同的开发场景：

1. 原生JavaScript（逐一生成DOM元素） #

这种方式适合需要给每个按钮单独绑定事件或者做个性化处理的场景，代码清晰易维护：

// 定义课程列表
const courses = [
  "Linear algebra",
  "Calculus I",
  "Basic Mechanics",
  "Mechanics1",
  "Mechanics2",
  "Mechanics3",
  "Mechanics4",
  "..."
];

// 获取页面的body元素
const body = document.querySelector('body');

// 遍历列表生成按钮
courses.forEach(course => {
  // 创建button元素
  const btn = document.createElement('button');
  // 设置按钮类型属性
  btn.type = 'button';
  // 设置按钮文本
  btn.textContent = course;
  // 将按钮添加到body中
  body.appendChild(btn);
});

2. 原生JavaScript（模板字符串批量渲染） #

如果不需要给每个按钮单独做处理，用模板字符串批量生成HTML代码会更高效简洁：

const courses = [
  "Linear algebra",
  "Calculus I",
  "Basic Mechanics",
  "Mechanics1",
  "Mechanics2",
  "Mechanics3",
  "Mechanics4",
  "..."
];

// 用map把每个课程转换成button的HTML字符串，再拼接起来
const buttonsHTML = courses.map(course => 
  `<button type="button">${course}</button>`
).join('');

// 插入到body中
document.querySelector('body').innerHTML = buttonsHTML;

3. jQuery版本（如果你项目里用了jQuery） #

如果你的项目依赖jQuery，那可以用更简洁的写法：

const courses = [
  "Linear algebra",
  "Calculus I",
  "Basic Mechanics",
  "Mechanics1",
  "Mechanics2",
  "Mechanics3",
  "Mechanics4",
  "..."
];

// 遍历列表，把每个按钮追加到body
$.each(courses, function(index, course) {
  $('body').append(`<button type="button">${course}</button>`);
});

以上几种方法都能实现你要的效果，你可以根据自己的项目环境选择最合适的~

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