js动态刷新 js动态更新数据

本文介绍了如何使用纯JavaScript更新动态生成的按钮内部元素的。重点在于如何通过事件委托准确定位到被点击按钮中的元素，并对其innerHTML属性进行修改，实现迭代功能。避免使用jQuery等库，提供了轻量级的解决方案。更新生成动态按钮中Span内容的JavaScript方法

在动态生成HTML元素时，直接使用document.querySelector 或 document.getElementById 等方法可能无法准确地定位到目标元素，尤其是在需要区分多个相似元素的情况下。针对这种情况，可以使用事件委托结合 e.target 属性来解决。事件委托和e.target

事件委托是一种常用的优化技巧，这里事件监听器添加到父元素上，而不是每个子元素。当子元素触发事件时，事件会冒泡到父元素，父元素上的监听器会处理该事件。e.target 属性指向触发事件的实际元素，然后被点击的子元素。实现步骤

创建按钮和容器： 首先，一个用于动态生成带有元素的按钮，并容器创建一个用于放置这些按钮。

立即学习“Java免费学习笔记创建（深入）”；lt；button id=quot；createquot；gt；Createlt；/buttongt；lt；div id=quot；appquot；gt；lt；/divgt；登录后复制

添加事件监听器：将事件监听器添加到父容器(#app)上，监听事件。const app = document.getElementById(quot；appquot；)；app.addEventListener(quot；clickquot；， (e) =gt； { // 复制事件处理逻辑})；登录后判断点击目标：在事件处理函数中，使用e.target确定点击的元素是否是目标按钮。由于点击的可能是按钮内的，需要判断e.target是否是按钮或者按钮的子元素。

获取Span元素并更新内容：如果点击按钮的是，可以通过 e.target.children 获取按钮的所有子元素，然后访问第一个子元素（即元素），并更新其innerHTML属性。

const app = document.getElementById(quot；appquot；)；app.addEventListener(quot；clickquot；， (e) =gt； { const btn = e.target； // 检查点击的元素是否是按钮或者按钮内的跨度 if (btn.classList.contains(quot；countquot；) || (btn.parentNode amp；amp；btn.parentNode.classList.contains(quot；countquot；))) { // 获取按钮元素 const buttonElement = btn.classList.contains(quot；countquot；) ? btn ： btn.parentNode； // 获取 span 元素 const spanElement = buttonElement.querySelector(quot；spanquot；)； // 更新 span 的 let count = parseInt(spanElement.innerHTML)； spanElement.innerHTML = count 1； }})；登录后复制

动态生成按钮：创建添加按钮的事件监听器 const htmlBtn = `lt；button class=quot；countquot；gt；lt；spangt；0lt；/spangt；lt；/buttongt；`；const create = document.getElementById(quot；createquot；)；create.addEventListener(quot；clickquot；， (e) =gt； { const container = document.createElement(quot；divquot；)； container.className = quot；containerquot；； container.innerHTML = htmlBtn； document.getElementById(quot；appquot；).append(container)；})；登录后复制完整代码示例lt；!DOCTYPE htmlgt；lt；htmlgt；lt；headgt； lt；titlegt；更新动态按钮中的跨度lt；/titlegt；lt；/headgt；lt；bodygt； lt；button id=quot；createquot；gt；Createlt；/buttongt； lt；div id=quot；appquot；gt；lt；/divgt； lt；scriptgt； const htmlBtn = `lt；按钮类=“；count”；gt；lt；spangt；0lt；/spangt；lt；/buttongt；`； const create = document.getElementById(“；create”；)； create.addEvent

Listener(quot；clickquot；， (e) =gt； { const container = document.createElement(quot；divquot；)；container.className = quot；containerquot；；container.innerHTML = htmlBtn； document.getElementById(quot；appquot；).append(container)； })； const app = document.getElementById(quot；appquot；)； app.addEventListener(quot；clickquot；；， (e) =gt； { const btn = e.target； // 检查点击的元素是否是按钮或者按钮内的跨度 if (btn.classList.contains(quot；countquot；) || (btn.parentNode amp；amp； btn.parentNode.classList.contains(quot；countquot；))) { // 获取按钮元素 const buttonElement = btn.classList.contains(quot；countquot；) ? btn ： btn.parentNode； // 获取span元素const spanElement = buttonElement.querySelector(quot；spanquot；)； // 更新 span 的内容 let count = parseInt(spanElement.innerHTML)； spanElement.innerHTML = count 1； } })； lt；/scriptgt；lt；/bodygt；lt；/htmlgt；登录后复制注意事项数据类型转换：innerHTML 属性返回是字符串，需要使用 parseInt() 将其为数字才能进行加法运算。 错误处理：在实际应用中，应该添加错误处理机制，例如检查e.target.children是否，以及innerHTML是否是有效的数字。CSS样式：可以添加CSS样式来美化按钮和元素。总结

通过事件委托和e.target属性存在，可以方便地定位到动态生成的按钮中的元素，并使用JavaScript更新其内容。这种避免方法使用了jQuery等库，提供了轻量级的解决方案。在实际应用中，可以根据需要进行修改和扩展，例如添加动画效果或将数据存储到服务器。

以上就是使用 JavaScript 更新动态生成按钮中跨度的内容详细内容，更多请关注乐哥常识网其他文章！