如何用原生JavaScript选中动态生成按钮内的span并更新其内容

开发类社交媒体点赞功能时，需要支持动态生成的帖子点赞/取消点赞按钮的计数更新，要求不使用jQuery，仅通过原生JavaScript选中当前点击按钮内部的span元素，实现点击对应按钮时仅更新该按钮内的点赞数值。

原有代码存在两个核心问题：

• 直接使用document.querySelector("span")会始终匹配页面中第一个span元素，无法定位到当前点击按钮对应的span
• 事件回调中直接取e.target，如果用户点击到按钮内部的span元素，e.target会是span而非按钮，容易出现匹配错误

使用事件委托+元素局部查找的逻辑即可实现，核心是把查询范围限制在当前点击的按钮内部，同时兼容点击到按钮子元素的场景，完整可运行代码如下：

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

<script>
// 按钮模板
const htmlBtn = `<button class="count"><span>0</span></button>`;

// 动态创建按钮逻辑
const create = document.getElementById("create");
create.addEventListener("click", () => {
  const container = document.createElement("div");
  container.className = "container";
  container.innerHTML = htmlBtn;
  document.getElementById("app").append(container);
});

// 委托绑定点赞点击事件
const app = document.getElementById("app");
app.addEventListener("click", (e) => {
  // 向上查找最近的.count按钮，兼容点击到内部span的情况
  const currentBtn = e.target.closest('.count');
  // 点击位置不在按钮范围内时直接跳过
  if (!currentBtn) return;

  // 仅在当前按钮范围内查找span，不会影响其他按钮
  const countSpan = currentBtn.querySelector('span');
  // 读取当前计数，自增后写回
  const currentCount = parseInt(countSpan.textContent, 10);
  countSpan.textContent = currentCount + 1;
});
</script>

• Element.closest(selector)是原生提供的向上查找方法，会从当前触发事件的元素开始，逐级向上匹配符合选择器的元素（包含自身），不用额外判断当前点击的是按钮还是内部的span，直接拿到对应的按钮实例
• 不要在document上调用querySelector，改为在拿到的当前按钮实例上调用querySelector，查找范围会被限制在当前按钮的子节点内，效果等价于jQuery的.find('span')，只会选中当前按钮内部的span
• 纯文本内容优先用textContent读写，比innerHTML性能更好，也能避免意外的HTML注入风险

如果需要扩展点赞/取消点赞切换逻辑，只需要给按钮加状态类判断即可，示例：

app.addEventListener("click", (e) => {
  const currentBtn = e.target.closest('.count');
  if (!currentBtn) return;
  const countSpan = currentBtn.querySelector('span');
  const currentCount = parseInt(countSpan.textContent, 10);
  
  // 切换点赞状态
  if (currentBtn.classList.contains('liked')) {
    // 已点赞状态下点击，取消点赞，计数-1
    countSpan.textContent = currentCount - 1;
    currentBtn.classList.remove('liked');
  } else {
    // 未点赞状态下点击，点赞，计数+1
    countSpan.textContent = currentCount + 1;
    currentBtn.classList.add('liked');
  }
});

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