JS中getElementById传入变量参数时无法正常工作的问题

你的DOM查询时机不对。调用getElementById、querySelector这类方法时，只能检索到已经挂载到当前页面DOM树的元素，你当前代码的执行顺序是：

1. 调用createElement创建按钮，在内存中给按钮设置id
2. 立刻调用DOM方法查询这个id对应的元素 → 此时按钮还没被插入页面，DOM树里根本不存在这个节点，自然返回null
3. 执行appendChild把按钮插入到页面中

这也解释了为什么等整段代码执行完，你在浏览器控制台手动执行查询就能拿到元素——这时候按钮已经完成挂载，DOM里可以检索到了。这个问题和你传变量还是传固定字符串、用哪种DOM选择API没有关系，纯粹是执行顺序的问题。

你完全不需要额外通过ID查询刚创建的按钮：创建元素时拿到的button变量就是对应按钮的直接引用，直接用它绑定事件即可，省去不必要的DOM查询开销，也不会出现时机问题：

let id = 0;
const listings = document.querySelector(".results").querySelectorAll(".item");

listings.forEach((listing) => {
  // 创建按钮元素
  const button = document.createElement("button");
  button.id = `button${id}`;
  button.type = 'button';
  button.textContent = '操作按钮'; // 按需设置按钮显示文本

  // 直接绑定点击事件
  button.addEventListener('click', () => {
    console.log(`触发点击的按钮ID：button${id}`);
    // 这里写点击后要执行的业务逻辑即可
  })

  // 将按钮插入到目标容器
  const targetDiv = listing.querySelector(".specific-div");
  targetDiv.appendChild(button);

  id++;
});

如果你确实需要通过ID获取元素，只要把DOM查询的逻辑挪到appendChild执行之后即可，此时元素已经挂载到DOM树，可以正常被检索到：

targetDiv.appendChild(button);
// 插入后再查询
const test = document.getElementById(`button${id}`);
console.log(test); // 正常输出按钮元素

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