如何在纯JavaScript中更新动态生成按钮内的文本内容

<button id="create">Create</button>
<div id="app"></div>

const htmlBtn = `<button class="count"><span>0</span></button>`;

const create = document.getElementById("create");
create.addEventListener("click", (e) => {
  const container = document.createElement("div");
  container.className = "container";
  container.innerHTML = htmlBtn;
  document.getElementById("app").append(container);
});

// 错误示例：会更新所有动态按钮中的第一个<span>
const app = document.getElementById("app");
app.addEventListener("click", (e) => {
  // 假设 e.target 是被点击的 .count 按钮
  // let count = document.querySelector("span").innerHTML; // 错误：总是选择第一个span
  // count++;
  // document.querySelector("span").innerHTML = count; // 错误：总是更新第一个span
});

// HTML结构 (与之前相同)
// <button id="create">Create</button>
// <div id="app"></div>

// 1. 动态生成按钮的逻辑 (与之前相同)
const htmlBtn = `<button class="count"><span>0</span></button>`;
const create = document.getElementById("create");

create.addEventListener("click", (e) => {
  const container = document.createElement("div");
  container.className = "container"; // 包装一下，如果需要的话
  container.innerHTML = htmlBtn;
  document.getElementById("app").append(container);
});

// 2. 使用事件委托处理点击事件
const app = document.getElementById("app");

app.addEventListener("click", (e) => {
  // 检查点击事件是否发生在具有 'count' 类的按钮上
  // e.target 是实际点击的元素
  // e.currentTarget 是事件监听器所绑定的元素 (#app)
  if (e.target.classList.contains("count")) {
    // 确保 e.target 是按钮本身，而不是按钮内部的 span
    // 如果点击的是 span，e.target 会是 span，需要向上查找父元素
    // 但在这个例子中，点击 span 也会冒泡到 button，所以直接处理 e.target.children[0] 即可
    // 更好的做法是检查 e.target 是否为 span，然后获取其父元素
    let targetButton = e.target;
    if (e.target.tagName === 'SPAN' && e.target.parentElement.classList.contains('count')) {
        targetButton = e.target.parentElement;
    } else if (!e.target.classList.contains('count')) {
        // 如果点击的不是按钮也不是按钮内的span，则退出
        return;
    }

    // 获取按钮内的第一个子元素，即 <span>
    const spanElement = targetButton.children[0];

    // 获取当前计数，并转换为整数
    let count = parseInt(spanElement.innerHTML);

    // 递增计数
    count++;

    // 更新 <span> 的 innerHTML
    spanElement.innerHTML = count;
  }
});