JQuery修改按钮文本与FontAwesome图标异常：点击后图标未更新

哎呀，我一眼就瞅到问题在哪啦！你这代码的问题出在**html("Sending...")把按钮里的图标元素直接删掉了**😯

为啥会这样？ #

假设你原本的按钮结构是类似这样的：

<button id="submit">
  <i id="avion" class="fas fa-plane"></i> Submit
</button>

当你执行$("#submit").html("Sending...")时，这个方法会完全替换按钮内部的所有HTML内容——包括那个带id="avion"的<i>图标元素。这时候DOM里已经没有#avion这个元素了，后面再执行$("#avion").addClass("fas fa-cog fa-spin")自然就没效果，相当于对着空气操作嘛！

至于你试的.val()或.text()：

• .val()只针对表单控件（比如<input>）的value属性，<button>的内容是在标签内部，所以没用；
• .text()会清空所有子元素，把按钮内容换成纯文本，同样会删掉图标元素，所以图标还是不会显示。

几种可行的修复方案 #

方案1：给文本单独加容器，分开修改

先给按钮里的文本部分加个<span>，这样可以只改文本，保留图标：

<button id="submit">
  <i id="avion" class="fas fa-plane"></i> <span class="btn-text">Submit</span>
</button>

然后修改JS代码：

// 修改文本内容
$("#submit .btn-text").text("Sending...");
// 替换图标类（先移除旧图标类，再加新的）
$("#avion").removeClass("fa-plane").addClass("fa-cog fa-spin");
// 给按钮加警告样式
$("#submit").addClass("btn-warning");

方案2：直接在html()里包含图标和新文本

如果不想加额外的<span>，可以一步到位把图标（带正确的类）和新文本一起放进html()里：

$("#submit")
  .html('<i id="avion" class="fas fa-cog fa-spin"></i> Sending...')
  .addClass("btn-warning");

这样既替换了文本，又直接设置了旋转齿轮的图标，不需要再单独操作#avion元素。

额外小提醒 #

确保你已经正确引入了FontAwesome的资源（比如CSS文件或CDN），虽然你原来的图标能显示，但如果fa-cog这类图标不生效，要检查是不是用了对应版本的FontAwesome哦～

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