title: Change link text with jquery
body: <p>I have a link within a Bootstrap 3 accordion like this:</p>
  
  <pre><code>&lt;a id="bedlink1" role="button" data-toggle="collapse" data-parent="#myaccordion" aria-expanded="true" href="#bed1"&gt; &lt;i class="material-icons pull-left"&gt;arrow_drop_down&lt;/i&gt;Bed 1&lt;/a&gt;
  </code></pre>
  
  <p>I need to change the text "Bed 1" in the link to a different value.  To do this, I used the following jQuery code:</p>
  
  <pre><code>$("#bedlink1").text("Bed 2");
  </code></pre>
  
  <p>That results in the link text being changed to "Bed 2" as expected but the icon defined with the  tag disappears.</p>
  
  <p>I also tried:</p>
  
  <pre><code>$("#bedlink1").text('&lt;i class="material-icons pull-left"&gt;arrow_drop_down&lt;/i&gt; Bed 2');
  </code></pre>
  
  <p>That resulted in the  tag being displayed as text as well as "Bed 2".</p>
  
  <p>How can I set the text of this link and retain the icon defined by the  tag?</p>