如何将Element.insertAdjacentHTML创建的按钮保存到变量中？

方法1：修正唯一ID后，插入HTML立即获取按钮 #

首先，循环生成的按钮存在ID重复问题（HTML要求ID必须唯一），先给每个按钮添加索引后缀保证唯一性，再在插入HTML后立即获取对应按钮：

btnClaim.addEventListener("click", () => {
    rewardCurrent.style.display = "none";
    claimedRewards.push(currentReward);
    rewardsList.innerHTML = ``;

    claimedRewards.forEach(function (rew, i) {
      // 给按钮ID添加索引，确保唯一
      const html = `
    <div class="reward" id="${i}">
      <div class="img-text-cont">
        <img src="${rew.imgUrl}" alt="">
        <div class="text-cont">
          <p class="claimed-reward-title">${rew.title}</p>
          <p class="claimed-reward-price">$${rew.price}</p>
        </div>
      </div>
      <div class="claimed-rewards-action">
        <button id="btn-sell-${i}">Sell</button>
        <button id="btn-ship-${i}">Ship</button>
      </div>
    </div>
      `;

      rewardsList.insertAdjacentHTML("afterbegin", html);
      
      // 插入后直接获取当前循环对应的按钮
      const btnSell = document.getElementById(`btn-sell-${i}`);
      const btnShip = document.getElementById(`btn-ship-${i}`);
      
      // 此处可直接使用变量绑定事件或执行其他操作
      btnSell.addEventListener('click', () => {
          console.log(`Sell reward ${i}`);
      });
      btnShip.addEventListener('click', () => {
          console.log(`Ship reward ${i}`);
      });
    });
});

方法2：用createElement创建元素，直接获取按钮引用 #

如果不想用HTML字符串拼接，推荐用原生DOM创建方法，可直接拿到元素引用，无需通过ID查找：

btnClaim.addEventListener("click", () => {
    rewardCurrent.style.display = "none";
    claimedRewards.push(currentReward);
    rewardsList.innerHTML = ``;

    claimedRewards.forEach(function (rew, i) {
      // 创建外层容器
      const rewardDiv = document.createElement('div');
      rewardDiv.className = 'reward';
      rewardDiv.id = `${i}`;

      // 创建图片文本容器
      const imgTextCont = document.createElement('div');
      imgTextCont.className = 'img-text-cont';

      const img = document.createElement('img');
      img.src = rew.imgUrl;
      img.alt = '';

      const textCont = document.createElement('div');
      textCont.className = 'text-cont';

      const titleP = document.createElement('p');
      titleP.className = 'claimed-reward-title';
      titleP.textContent = rew.title;

      const priceP = document.createElement('p');
      priceP.className = 'claimed-reward-price';
      priceP.textContent = `$${rew.price}`;

      textCont.appendChild(titleP);
      textCont.appendChild(priceP);
      imgTextCont.appendChild(img);
      imgTextCont.appendChild(textCont);

      // 创建操作按钮容器
      const actionCont = document.createElement('div');
      actionCont.className = 'claimed-rewards-action';

      // 创建Sell按钮，直接获取引用
      const btnSell = document.createElement('button');
      btnSell.id = `btn-sell-${i}`;
      btnSell.textContent = 'Sell';

      // 创建Ship按钮，直接获取引用
      const btnShip = document.createElement('button');
      btnShip.id = `btn-ship-${i}`;
      btnShip.textContent = 'Ship';

      // 绑定事件
      btnSell.addEventListener('click', () => {
          console.log(`Sell reward ${i}`);
      });
      btnShip.addEventListener('click', () => {
          console.log(`Ship reward ${i}`);
      });

      actionCont.appendChild(btnSell);
      actionCont.appendChild(btnShip);

      // 组装所有元素
      rewardDiv.appendChild(imgTextCont);
      rewardDiv.appendChild(actionCont);

      // 插入到列表中
      rewardsList.insertAdjacentElement('afterbegin', rewardDiv);

      // btnSell和btnShip即为所需变量，可直接使用
    });
});

补充：事件委托（无需单独存变量时使用） #

如果仅需给按钮绑定事件，无需单独存储每个按钮变量，可使用事件委托，给父元素rewardsList绑定一次事件即可：

// 父元素绑定事件，只需执行一次
rewardsList.addEventListener('click', (e) => {
    if (e.target.matches('.sell-btn')) {
        const rewardId = e.target.closest('.reward').id;
        console.log(`Sell reward ${rewardId}`);
    } else if (e.target.matches('.ship-btn')) {
        const rewardId = e.target.closest('.reward').id;
        console.log(`Ship reward ${rewardId}`);
    }
});

btnClaim.addEventListener("click", () => {
    rewardCurrent.style.display = "none";
    claimedRewards.push(currentReward);
    rewardsList.innerHTML = ``;

    claimedRewards.forEach(function (rew, i) {
      const html = `
    <div class="reward" id="${i}">
      <div class="img-text-cont">
        <img src="${rew.imgUrl}" alt="">
        <div class="text-cont">
          <p class="claimed-reward-title">${rew.title}</p>
          <p class="claimed-reward-price">$${rew.price}</p>
        </div>
      </div>
      <div class="claimed-rewards-action">
        <button class="sell-btn">Sell</button>
        <button class="ship-btn">Ship</button>
      </div>
    </div>
      `;

      rewardsList.insertAdjacentHTML("afterbegin", html);
    });
});

内容的提问来源于stack exchange，提问作者Lazar Panović