添加Font Awesome图标后JS修改按钮文本功能失效原因求解

问题原因 #

你使用innerHTML进行全等判断的逻辑，在按钮加入<i>图标标签后不再成立：

• 无图标时按钮的innerHTML就是纯文本Add，满足=== "Add"的判断条件，代码正常执行
• 加入Font Awesome图标后，按钮的完整innerHTML是<i class="fas fa-save" aria-hidden="true"></i>Add，和纯文本Add不相等，判断条件直接不触发，自然不会修改文本

可行的解决方案 #

这里提供两种常用的修复方案：

方案1：直接调整判断和替换逻辑，保留图标结构 #

不需要修改现有HTML结构，直接调整JS的判断和赋值逻辑即可：

var modal_button_update = document.getElementById("modal_button_text");
// 改用包含判断，匹配文本内容
if (modal_button_update.innerHTML.includes("Add")) {
  // 替换时保留图标标签，只修改后面的文本
  modal_button_update.innerHTML = '<i class="fas fa-save" aria-hidden="true"></i>Update';
}

方案2：文本与图标分离（更易维护） #

给按钮内的文本单独套一层<span>标签，后续只操作文本节点，不会影响图标：
修改后的按钮代码：

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">
  <i class="fas fa-save" aria-hidden="true"></i>
  <span class="btn-text">Add</span>
</button>

对应的JS代码：

const btnTextEl = document.querySelector("#modal_button_text .btn-text");
if (btnTextEl.textContent.trim() === "Add") {
  btnTextEl.textContent = "Update";
}

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