
本文介绍如何利用 jquery 的 click 事件和 text() 方法,通过一个控制按钮实时更改目标按钮的显示文本,实现简洁高效的 dom 文本更新。
在 Web 开发中,动态更新界面元素是常见需求。例如,点击“切换状态”按钮后,将另一个按钮的文本从 “Cat” 改为 “Dog”,无需刷新页面即可完成交互。这可通过 jQuery 轻松实现。
首先,确保页面已引入 jQuery 库(推荐使用 CDN):
接着,定义两个按钮:一个作为目标(初始显示 “Cat”),另一个作为触发器(点击后修改目标文本):
然后,编写事件处理逻辑——为触发按钮绑定 click 事件,并在回调中调用 .text() 方法更新目标按钮的内容:
$('#chnage_text_button').click(function () {
$('#button_1_id').text('Dog');
});✅ 注意事项:
- 确保 JavaScript 代码在 DOM 加载完成后执行(可包裹在 $(document).ready() 中,或置于










