title: Change anchor text in jQuery mobile without ruining the layout
body: <p>How to change anchor text without ruining the layout? In this case, when I trigger the function, the layout is totally ruined. I want to keep the icon and only change the text.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;a href=# id="change"&gt;login&lt;/a&gt;
  &lt;footer id="footer" data-role="footer" data-position="fixed"&gt;
    &lt;div id="nav" data-role="navbar"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" data-icon="home" data-iconpos="bottom"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#login" data-icon="gear" data-iconpos="bottom" data-transition="flip" class="ui-btn-active ui-state-persist"&gt;Login&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#info" data-icon="info" data-iconpos="bottom" data-transition="flip"&gt;Info&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(function(){
    $("#change").click(function(){
      $("li:nth-child(2) a").text("Profile");
    });
  });
  </code></pre>
  
  <p>Here is <a href="http://jsfiddle.net/xuLS2/" rel="nofollow">the jsFiddle link</a>.</p>
  
  <p>Thanks!</p>