如何用jQuery替换<span>标签后的文本？现有代码未达预期

你的问题出在错误操作了<span>元素的内部内容，而你真正要替换的是<span>后面紧跟的独立文本节点（比如ACCOUNT、PLAN这些）。之前的代码把kk追加到了<span>标签内部，自然会出现Account number:kk ACCOUNT的结果。

下面给你两种靠谱的解决方案：

方案1：精准操作目标文本节点（推荐） #

这种方法直接定位到<span>的下一个兄弟文本节点，替换它的内容，结构变更风险低：

// 替换第一个条目（账号）的文本
$(".simple_layer .main_content span").first().get(0).nextSibling.nodeValue = ' kk';

如果需要批量替换所有三个条目（账号、套餐、到期日），可以用each循环：

// 准备对应三个条目的替换内容
const replacementTexts = [' kk', ' 我的新套餐', ' 2025.01.01 (剩余365天)'];

$(".simple_layer .main_content span").each(function(index) {
  // 找到当前span的下一个文本节点，替换内容
  this.nextSibling.nodeValue = replacementTexts[index];
});

方案2：通过HTML字符串替换（适合结构固定的场景） #

如果你的HTML结构不会轻易变动，也可以直接修改.main_content的HTML内容，用正则匹配替换：

const $content = $(".simple_layer .main_content");
let originalHtml = $content.html();

// 正则匹配每个<span>后面的内容，替换成目标文本
const updatedHtml = originalHtml.replace(
  /(<span class="label">.*?:<\/span>)\s.*?(<br>)/g,
  '$1 kk$2'
);

$content.html(updatedHtml);

为什么原来的代码无效？ #

你之前的代码$(".simple_layer .main_content").find("span")[0].innerHTML += ' kk<br>';是把kk<br>追加到了<span>标签的内部，相当于把：

<span class="label">Account number:</span> ACCOUNT<br>

改成了：

<span class="label">Account number:kk<br></span> ACCOUNT<br>

所以页面上会显示Account number:kk ACCOUNT——后面的ACCOUNT是独立的文本节点，根本没被修改。

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