JavaScript map生成DOM时onclick传参报错及元素追加错位问题

第一个报错：内联onclick传对象触发语法错误 #

错误原因 #

模板字符串里直接写onclick="createModal(${student})"时，对象类型的student会被自动转成[object Object]字符串拼入HTML属性，最终生成的事件代码是onclick="createModal([object Object])"，属于非法JS语法，才会抛出Uncaught SyntaxError: Unexpected identifier。
之前尝试的深拷贝方案没有生效，本质是因为只要直接把对象插入HTML属性值，都会触发默认的字符串转换，不可能得到合法的参数传递逻辑。

可选修复方式 #

• 临时修复（仍使用内联事件）：序列化对象为JSON字符串传入，注意属性引号冲突

  ${workshop.students.map(student =>
     `<li class="list-group-item">
        <a data-bs-toggle="modal" data-bs-target="#studentModal" type="button" onclick='createModal(${JSON.stringify(student)})'>${student.first_name} ${student.last_name}</a>
      </li>`
  ).join("")}
  

  这里onclick属性必须用单引号包裹，因为JSON.stringify输出的内容使用双引号，避免引号闭合导致的语法错误。
• 推荐修复：用原生DOM绑定事件的方式，完全规避HTML转义问题，也就是你后续调整的实现方向，只需要解决第二个逻辑bug即可。

第二个bug：所有学生项都被追加到第一个列表容器 #

错误原因 #

1. 你每次循环写的document.querySelector(".student-list")是在全页面范围查找第一个匹配的元素，而且执行这行代码的时候，当前工作坊对应的行还没插入页面，所以永远拿到的是已经渲染的第一个学生列表，所有li都被塞到这个容器里，后续新插入行的列表自然是空的。
2. 你在tr.innerHTML的模板字符串里嵌入${workshop.students.forEach(...)}是无效写法：forEach没有返回值，这里插值只会插入undefined，你在forEach里写的DOM插入逻辑和当前tr的渲染完全脱节，时序和DOM查找范围全错。

修复后可运行代码 #

const workshopList = document.querySelector(".workshop-list");

async function getData(){
  const allWorkshops = await fetch("/api/workshops/detail");
  const data = await allWorkshops.json();
  data.forEach((workshop) => {
      const tr = document.createElement("tr");
      tr.classList.add("responsive-table__row");
      // 先渲染当前行的基础结构，包含当前行专属的学生列表容器
      tr.innerHTML = `
          <td class="responsive-table__body__text responsive-table__body__text--name">
              <ul class="list-group student-list"></ul>
          </td>
      `;
      // *查找范围限定在当前tr内部*，只拿当前行对应的学生列表
      const studentList = tr.querySelector(".student-list");
      // 遍历当前工作坊的学生，逐个创建元素追加到当前行的列表
      workshop.students.forEach(student => {
          const li = document.createElement('li');
          li.classList.add('list-group-item');
          const anchor = document.createElement('a');
          anchor.dataset.bsToggle = 'modal';
          anchor.dataset.bsTarget = '#studentModal';
          anchor.type = 'button';
          anchor.addEventListener('click', () => createModal(student));
          anchor.textContent = `${student.first_name} ${student.last_name}`;
          li.appendChild(anchor);
          studentList.appendChild(li);
      });
      // 行内容全部组装完成后再插入表格
      workshopList.appendChild(tr);
  });
}
getData();

核心调整点 #

• 把学生列表的查找范围缩小到当前创建的tr内部，避免全局查找匹配到其他行的容器
• 调整渲染时序：先生成当前行的DOM结构，再往内部填充学生项，最后插入页面
• 移除模板字符串里无效的forEach插值，DOM创建逻辑独立执行，避免渲染时序混乱

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