jQuery change函数修改按钮文本时i标签丢失，如何保留带指定类的图标？

问题原因 #

你使用text()方法替换按钮内容时，会直接覆盖目标元素内的所有子元素（包括你的<i>图标标签）和原有文本，所以图标会消失。

解决方案 #

方案1（最推荐，可维护性最高）：给文本单独包裹标签，仅修改文本标签内容 #

1. 先修改按钮HTML结构，给文本部分套上独立的<span>标签：

<button id="add-new" type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#targetModal">
  <i class="fas fa-plus-square"></i> 
  <span id="btn-text">Add New CRR Exclusion</span>
</button>

2. 修改jQuery代码，仅替换span内的文本：

$('#action').on('change',function(){
  var buttonText = $(this).find(':selected').data('buttontext');
  $('#btn-text').text(buttonText);
});

方案2（无需修改原有HTML结构）：直接定位文本节点替换 #

如果不想改动原有HTML代码，可以通过过滤文本节点的方式仅修改文字部分：

$('#action').on('change',function(){
  var buttonText = $(this).find(':selected').data('buttontext');
  // 过滤出按钮内的文本节点，替换内容
  $('#add-new').contents().filter(function() {
    return this.nodeType === 3; // 3代表文本节点
  }).last().replaceWith(' ' + buttonText);
});

方案3：拼接图标+新文本重写HTML内容 #

这种方案写法最简单，但如果后续图标类名修改需要同步改JS代码，可维护性稍差：

$('#action').on('change',function(){
  var buttonText = $(this).find(':selected').data('buttontext');
  $('#add-new').html('<i class="fas fa-plus-square"></i> ' + buttonText);
});

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