嵌套时CSS不起作用

Question

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

我只是不明白为什么。只要我不更改徽标的图标就可以了。

HTML

 <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>

JS改变图标（工作）

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

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

$$.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;}});

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

  

TypeError：null不是对象（评估'document.getElementById（'tabText'）。innerHTML = data'）

我认为它可能与嵌套有关......

感谢任何帮助。