How to change the text of <li> element in html dynamically without flickering of tabs.?

How to change the text of <li> element in html dynamically without flickering of tabs.?

Hi All,

I want to create 6 tabs in html(2 static and 4 dynamic based on strings read from Javascript server).
I created 2 static tabs and 4 dynamic tabs(these are dummy tabs now, as I gave them an arbitary name and hide it). Now, I am using jquery to wait for the appropriate string to be returned by my Javascript server to change the tabs name to that particular string. 
Here is the code snippet for 1 dynamic tab:

My Html code :

<ul id="myList">

<li class="active" id="welcome"><a href="index.html"><span>Welcome</span></a></li>
<li style="display: none" class="" id="cape1"><a href="abc.html"><span>Hello</span></a></li>

<li class="" id="infos"><a href="about.html"><span>Infos</span></a></li>
</ul>
</div>



My Jquery code:

            if(capeTab == 'BBB')
            {
        
            $('#myList #cape1').hide();
        
            $('#myList #cape1').text('BBB');
         
            $('#myList #cape1').show();

            }

This code let me change the text name of the tab. but it is displayed now as a normal text on html tab.
But I need it to be present as an original tab in html but with changed string name.

Can you please suggest something how to do it ?

Let me know if you need any more information ? 

Thanks
Adit