title: How can I make this javascript more efficient?
body: <p>i am receiving a piece of plain html from an ajax request.</p>
  
  <pre><code>&lt;h1&gt;Title&lt;/h1&gt;
  &lt;div&gt;
    content
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the most simple form. Every piece contains a <code>&lt;h1&gt;</code> tag for a title, and a <code>&lt;div&gt;</code> tag containing the content. I have a nicely formatted <code>container</code> in the html page which needs to populate with the returned html snippet.</p>
  
  <p>This is the container:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div class="header"&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I use the following javascript function to parse the <code>html</code> and place it in the <code>container</code>.</p>
  
  <pre><code>function loadContent(id, data) {
      var container = $('#'+id);
      var title = '';
      var content = '';
  
      $(data).filter('h1:first').each(function() {
          title = $(this).html();
          content = $(this).next().html();
      });
  
      $('div.header',container).html(title);
      $('div.content', container).html(content);
  }
  </code></pre>
  
  <p><strong>Everything seems to be working 'allright', subsequent ajax requests that have different html contents load pretty quickly. But when I click a link that invokes a full page refresh, it hangs for about 3 or 4 seconds before loading clicked hyperlink. This makes me think it is a javascript issue, maybe where some content stays in memory? Can somebody see where this might become inefficient?</strong></p>