如何在EJS文件中通过JavaScript根据列表数量动态添加按钮？

一、Express POST路由配置 #

首先确保你的Express项目配置了解析POST请求体的中间件（否则无法获取前端提交的数据），然后在路由中传递列表数据到指定EJS页面：

const express = require('express');
const app = express();

// 配置中间件解析POST表单数据
app.use(express.urlencoded({ extended: true }));

app.post('/wanttogo', function (req, res) {
  // 两种获取列表的方式：
  // 1. 直接定义测试用列表
  const itemList = ["Salad", "Tomato", "Paste"];
  // 2. 从前端POST的请求体中获取（比如前端提交了名为items的数组）
  // const itemList = req.body.items;

  // 渲染目标EJS页面，将列表以items变量传递过去
  res.render('target-page', { items: itemList });
});

二、EJS页面动态生成按钮 #

在你的目标EJS页面（比如views/target-page.ejs）中，使用EJS的循环语法遍历传递过来的列表，生成对应数量的按钮：

<!-- target-page.ejs -->
<div class="button-group">
  <%-- 遍历items数组，每个元素生成一个按钮 --%>
  <% items.forEach(item => { %>
    <button type="button" class="custom-button">
      <%= item %>
    </button>
  <% }) %>
</div>

补充说明 #

• EJS是服务器端渲染模板，循环逻辑在服务器执行，页面返回给浏览器时已经包含所有生成的按钮，无需前端额外编写动态添加逻辑。
• 列表长度无论在8-10之间的哪个数值，都会自动生成对应数量的按钮，完全匹配元素个数。
• 可以给按钮添加类名、点击事件等扩展功能，比如在button标签中加入onclick="handleButtonClick('<%= item %>')"绑定前端交互逻辑。

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