Javascript 如果嵌套，CSS将不起作用

我有一个用Framework7制作的webapp，但我认为这个问题与CSS有关。问题是，当我第一次更改选项卡图标时，选项卡上的徽章就会消失

我就是不明白为什么。只要我不改变图标，徽章就可以工作

HTML

JS更改并激活徽章（更改图标后-更改前不起作用）

我在控制台中遇到的错误如下：

TypeError:null不是对象（计算'document.getElementById（'tabText'）。innerHTML=data'）

我想这可能与筑巢有关

---

非常感谢您的帮助。

element.innerHTML=“something”

将替换该元素中的所有内容。在这种情况下，

gear

变成了“某物”。因此，一个解决方案是

document.getElementById（'tabIcon'）。innerHTML='gear_fill'

（我必须补充一点，我认为这不是一个很好的方法…

document.getElementById（'tabIcon'）.childNodes[0]。nodeValue='gear_fill'应仅更改文本。我觉得这样更好，但还是不好看。谢谢，第二部分很有效。那样的话就够漂亮了。：）
 <a href="#tablink" id="tab" class="link no-animation"><i class="icon f7-icons" id="tabIcon" style="color:white">gear<span id="tabText"></span></i></a>

document.getElementById('tabIcon').innerHTML = "gear_fill";

$$.get(serverAddress + 'source/source.php',
function(data) { if (data==""){$$('#tabText').removeClass('badge bg-red'); document.getElementById('tabText').innerHTML = data;}
else{ $$('#tabText').addClass('badge bg-red'); document.getElementById('tabText').innerHTML = data;}});