title: Replace text of a div which contain a <span> with icon
body: <p>I want to replace the whole text of a div but not remove the <code>span</code> inside it.</p>
  
  <p>I have to replace the text in the following div ("Yourself") once the user clicks on some element in the <code>ul</code>:</p>
  
  <pre><code>&lt;div style="display: inline"&gt;
      &lt;div class="text-light" style="float: left"&gt;Post as: &lt;/div&gt;
      &lt;div class="link toggle-post" style="float: right" &gt;
          Yourself
          &lt;span id="dropdownIcon" class="ui-icon-dropdown"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using the following code:</p>
  
  <pre><code>$('[data-postas]').click(function changeHeader(event){
      var element = $(event.srcElement);
      $('.toggle-post').text().replace($('.toggle-post').text(), element.text());
      $('#postAs').val(element.attr('data-postas'));
      if (element.attr('data-company')){
          $('#company').val(element.attr('data-company'));
      }
  
      $('.icon-cheack').remove();
      element.append('&lt;i class="icon-cheack fright"&gt;&lt;/i&gt;');
      setTimeout(function() {
          $(".ul-post").toggle();
      }, 500);
      $('#dropdownIcon').addClass('ui-icon-dropdown');
  })
  </code></pre>
  
  <p>The text is not replaced</p>