如何使用jQuery修改按钮文本同时保留图标span元素

问题场景 #

我有一个按钮的HTML结构（通过Chrome开发者工具审查得到）：

<button type="button" class="btn" data-action-type="2">
  <span class="glyphicon glyphicon-ok">
    ::before
  </span>
  " Action "
</button>

我想把按钮里的“Action”改成“No Action”，执行了这段jQuery代码：

var btn = $('[data-action-type = "2"]'); 
btn.text('No Action');

代码确实修改了文本，但同时把内部的span图标元素也清除了。尝试用console.log(btn)查找“Action”的位置未果，请问怎么修改文本同时保留图标？

解决方案 #

问题出在btn.text()会替换按钮内所有子元素和文本内容，包括图标span。以下几种方法可以解决这个问题：

方法1：定位独立文本节点修改 #

按钮里的“Action”是独立的文本节点，可通过筛选节点的方式找到并修改：

var btn = $('[data-action-type="2"]');
// 遍历按钮子节点，定位有效文本节点并修改
btn.contents().each(function() {
  // nodeType === 3 代表文本节点，过滤空换行/空格节点
  if (this.nodeType === 3 && $.trim(this.nodeValue) !== '') {
    this.nodeValue = ' No Action ';
  }
});

方法2：给文本单独加容器（推荐） #

如果能修改原始HTML，建议把按钮文本放在单独标签里，后续修改更直观：

<button type="button" class="btn" data-action-type="2">
  <span class="glyphicon glyphicon-ok"></span>
  <span class="btn-text"> Action </span>
</button>

修改时直接定位文本容器：

$('[data-action-type="2"] .btn-text').text(' No Action ');

方法3：先保存图标再重新插入 #

先把图标元素暂存，修改文本后再插回按钮：

var btn = $('[data-action-type="2"]');
var icon = btn.find('.glyphicon').detach(); // 移除并保存图标
btn.text(' No Action '); // 修改文本
btn.prepend(icon); // 将图标插回按钮开头

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