如何修改代码实现切换span文本且不移除i标签？

当前点击主题切换的<a>标签时，原有JavaScript代码会修改整个标签的innerText，导致内部的图标<i>被移除。下面是修改方案，实现仅切换<span>元素的文本，同时保留图标：

修改后的JavaScript代码 #

function toggle(e) {
  // 定位到a标签下的.nav__name span元素
  const textSpan = e.querySelector('.nav__name');
  const currentTxt = textSpan.innerText;
  textSpan.innerText = currentTxt === 'Modo escuro' ? 'Modo claro' : 'Modo escuro';
}

HTML结构保持不变 #

<a onclick="toggle(this)" id="theme-toggle" href="#" class="nav__link" >
    <i class='bx bx-bulb nav__icon' ></i>
    <span class="nav__name">Modo escuro</span>
</a>

原理说明 #

原有代码直接修改了<a>标签的innerText，会覆盖掉标签内的所有子元素（包括图标<i>）。修改后的代码通过querySelector精准定位到负责显示文本的<span>元素，只更新该元素的文本内容，不会影响同级的图标元素，从而保留按钮的完整样式。

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