本文介绍了如何使用纯 JavaScript 更新动态生成的按钮内部的 span 元素的 innerHTML。 通过事件委托和访问子元素，我们可以精确地定位并修改特定按钮中的 span 元素，实现类似社交媒体点赞功能的计数器效果。
动态生成按钮和 Span 元素
首先，我们需要动态地生成包含 span 元素的按钮。以下代码演示了如何使用 JavaScript 创建一个按钮，并在按钮内部添加一个 span 元素，然后将按钮添加到页面中。
<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 元素的 HTML 字符串 htmlBtn。然后，它获取 ID 为 create 的按钮元素，并为其添加一个点击事件监听器。当点击 create 按钮时，会创建一个新的 div 元素，并将 htmlBtn 的内容添加到该 div 中，最后将该 div 添加到 ID 为 app 的元素中。
使用事件委托更新 Span 元素
接下来，我们需要使用事件委托来监听按钮的点击事件，并更新 span 元素的 innerHTML。 事件委托是一种常用的优化技巧，它可以将事件监听器添加到父元素上，而不是每个子元素上。这样可以减少事件监听器的数量，提高性能。
Yes!Sun基于PHP+MYSQL技术，体积小巧、应用灵活、功能强大，是一款为企业网站量身打造的WEB系统。其创新的设计理念，为企业网的开发设计及使用带来了全新的体验：支持前沿技术：动态缓存、伪静态、静态生成、友好URL、SEO设置等提升网站性能、用户体验、搜索引擎友好度的技术均为Yes!Sun所支持。易于二次开发：采用独创的平台化理念，按需定制项目中的各种元素，如：产品属性、产品相册、新闻列表
立即学习“Java免费学习笔记（深入）”；
const app = document.getElementById("app");
app.addEventListener("click", (e) => {
const btn = e.target;
if (btn.tagName === 'BUTTON' && btn.classList.contains('count')) {
let count = parseInt(btn.children[0].innerHTML);
btn.children[0].innerHTML = count + 1;
}
});这段代码首先获取 ID 为 app 的元素，并为其添加一个点击事件监听器。当点击 app 元素内部的任何元素时，都会触发该监听器。在监听器内部，我们首先通过 e.target 获取到实际被点击的元素。然后，我们检查该元素是否是一个 BUTTON 元素，并且是否包含 count class。如果是，则表示点击的是我们动态生成的按钮。
关键在于 btn.children[0]，它允许我们访问按钮的第一个子元素，也就是 span 元素。我们可以通过 btn.children[0].innerHTML 获取到 span 元素的 innerHTML，并将其转换为整数。然后，我们将整数加 1，并将结果重新赋值给 span 元素的 innerHTML。
注意事项
- 类型转换: innerHTML 返回的是字符串，因此需要使用 parseInt() 将其转换为整数，才能进行加法运算。
- 错误处理: 在实际应用中，应该添加错误处理机制，例如检查 e.target 是否真的存在，以及 innerHTML 是否可以成功转换为整数。
- CSS样式: 可以通过CSS添加样式，让按钮看起来更美观。
完整代码示例
<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", (e) => {
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) => {
const btn = e.target;
if (btn.tagName === 'BUTTON' && btn.classList.contains('count')) {
let count = parseInt(btn.children[0].innerHTML);
btn.children[0].innerHTML = count + 1;
}
});
</script>总结
通过事件委托和访问子元素，我们可以使用纯 JavaScript 更新动态生成的按钮内部的 span 元素的 innerHTML。这种方法简单有效，并且可以避免使用 jQuery 等第三方库。 在实际应用中，可以根据需要进行扩展，例如添加错误处理机制、CSS 样式等。
