如何使用jQuery正确为span标签赋值更新内容？

• 写法1：$("#my_balance").html(formatted_balance)
  该写法会直接清空<p id="my_balance">下的所有原有内容（包括带样式的<span class="pr-1">EUR</span>标签、 间隔符），完全替换为formatted_balance的内容。如果formatted_balance未保留原有的span标签结构，自然会出现span内容丢失的问题；如果执行后完全无变化，通常是代码执行时机早于DOM加载完成，或选择器匹配不到目标元素。若已执行过该写法导致原有DOM结构被覆盖，需先手动恢复<p id="my_balance">下的原始结构，再执行后续更新。
• 写法2：$("#my_balance > span").html(formatted_balance)
  该写法本身是针对span内部内容的替换操作，正常不会出现内容跑到标签外的问题。如果出现新旧值同时展示、内容脱离span的情况，通常是两个原因：一是formatted_balance变量本身包含了</span>、额外文本等非法HTML结构；二是前期操作已经在DOM中插入了多余的冗余节点，未清理。

场景1：保留原有EUR单位span，仅更新span后的余额数值 #

这是最常见的实际需求（你原有DOM中的数字部分不属于span，直接改span自然无法生效）。

方案推荐：给数值部分加独立标识 #

修改初始DOM结构，给数值部分增加独立的span方便定位，避免操作裸文本节点的兼容问题：

<p id="my_balance"><span class="pr-1">EUR</span>&nbsp;<span id="balance_value">999,999.99</span></p>

更新时直接调用：

$("#balance_value").text(formatted_balance);

不改原有DOM结构的实现方式 #

如果不能修改原有HTML结构，可通过jQuery定位span后的裸文本节点，替换其内容：

// 定位#my_balance下的有效文本节点（排除span元素）
const targetTextNode = $("#my_balance").contents().filter(function() {
  return this.nodeType === Node.TEXT_NODE && this.textContent.trim() !== "";
}).first()[0];
// 替换内容，保留 间隔（用Unicode字符\u00A0表示不换行空格）
targetTextNode.textContent = `\u00A0${formatted_balance}`;

场景2：确实需要修改span内部的内容（比如替换货币单位为CNY） #

直接使用.text()方法替代.html()，避免HTML解析异常：

// 先清空span内的所有内容，再写入新值，避免旧值残留
$("#my_balance > span").empty().text(formatted_balance);

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