本文讲解如何在保留按钮内嵌 图标（如 Glyphicons）的前提下，仅更新其后的纯文本内容，避免误删 DOM 子节点。核心在于区分 .text() 与 .html() 的行为差异，并推荐更健壮的节点操作方案。
本文讲解如何在保留按钮内嵌 `` 图标（如 glyphicons）的前提下，仅更新其后的纯文本内容，避免误删 dom 子节点。核心在于区分 `.text()` 与 `.html()` 的行为差异，并推荐更健壮的节点操作方案。
当使用 $(selector).text('New Text') 时，jQuery 会清空目标元素的所有子节点（包括 <span></span>、<i></i> 等），然后插入纯文本内容——这正是图标消失的根本原因。而 .html() 虽可重建完整结构，但直接拼接 HTML 字符串（如答案中所示）存在明显缺陷：它硬编码了原始 HTML，且错误地将 ::before 伪元素写入 DOM（伪元素不可通过 HTML 字符串声明），还遗漏了引号闭合（glyphicon-ok> 应为 glyphicon-ok">），极易引发语法错误或样式丢失。
✅ 正确做法是精准定位并替换文本节点，而非重写整个 HTML：
var btn = $('[data-action-type="2"]');
// 获取所有子节点，过滤出纯文本节点（nodeType === 3），并跳过空白文本
var textNodes = $.grep(btn.contents(), function(node) {
return node.nodeType === 3 && $.trim(node.nodeValue) !== '';
});
if (textNodes.length > 0) {
textNodes[0].nodeValue = 'No Action'; // 直接修改文本节点值
}
? 更简洁可靠的替代方案（推荐）：
若按钮结构固定（图标 <span></span> 始终在前，文本始终在后），可使用 .contents().last() 定位末尾文本节点：
$('[data-action-type="2"]').contents().last().get(0).nodeValue = 'No Action';
⚠️ 注意事项：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 避免使用
.html()重写整个内容，除非你完全控制并验证了原始 HTML 结构；否则易引入 XSS 风险、破坏事件绑定或丢失动态状态。 - 不要尝试操作
::before/::after伪元素——它们由 CSS 渲染，无法通过 JS 直接读写，只能通过修改类名或 CSS 变量间接控制。 - 若需兼容旧版 IE，注意
nodeValue在某些场景下可能为null，建议增加空值判断。
? 总结：修改混合内容按钮的文本，本质是 DOM 节点级操作。优先选择 contents() + 文本节点定位，兼顾安全性、可维护性与语义清晰度——既保图标，又准达意。
