title: IE+jQuery+Ajax+XHTML: HTML getting clipped after .html() or .innerHTML
body: <p>This is a really hard problem to put into a brief sentence, so I apologize if I kill it.</p>
  
  <p>I launched a site recently which had been extensively tested on my local web server on all my desired browser platforms, including IE8 (IE8 standards mode, XHTML Strict).  I encountered no problems at all until the site went live on a dedicated web server.</p>
  
  <p>The site uses <code>jQuery.get()</code> on the <code>change</code> event for the <code>input</code> elements of a form, where the response is grafted into a common <code>&lt;div id="results"&gt;&lt;/div&gt;</code>.</p>
  
  <p>Despite the caching woes I've read about with IE and XMLHTTPRequest, my problem seems to take place AFTER my ajax callback begins execution.  My callback (supplied via <code>.get()</code> / <code>.load()</code>-- I've tried both) receives an HTML fragment returned by my server.  Testing the returned content in any browser reveals exactly what I expect the content to be.</p>
  
  <p>However, as soon as I put the HTML fragment into the DOM tree in the <code>#results</code>, IE actually clips the first 7 or 8 opening tags off of my markup (along with the children of most of those tags).  It's wickedly bizarre.  I fixed it in another area of the site by setting the HTML content via <code>jQuery('#results')[0].innerHTML = content</code>, but no dice this time.</p>
  
  <p>Example response:</p>
  
  <pre><code>&lt;div&gt;
      &lt;a href="#"&gt;some link&lt;/a&gt;
      &lt;span&gt;stuff, blah blah&lt;/span&gt;
      &lt;a href="#"&gt;another link&lt;/a&gt;
  
      &lt;ul&gt;
          &lt;li id="item-2342"&gt;
              &lt;img src="#" /&gt;
              &lt;div class="info"&gt;
                  &lt;h6&gt; ..title.. &lt;/h6&gt;
                  &lt;a href="#"&gt;View&lt;/a&gt;
                  &lt;span rel="stats"&gt; ..statistics.. &lt;/span&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;!-- ... and so on in a loop over items to create more &lt;li&gt; items ... --&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Literally EVERYTHING up through the opening tag of that <code>&lt;span rel="stats"&gt;</code> is truncated.  The effect is that IE displays my returned AJAX content as if it were to begin with the text node: <code>..statistics.. &lt;/span&gt;</code>.  (I tried removing the <code>rel="stats"</code> at the suggestion of a comment below, changing it to a CSS class instead, but the same result occurs.)</p>
  
  <p>If I request my AJAX url directly via the browser's URL field, the returned content is perfect.</p>
  
  <p>If I use <code>alert()</code> to display the AJAX content returned, it is perfect.</p>
  
  <p>If I assign my AJAX content via <code>.html()</code> or <code>.innerHTML</code>, it is immediately truncated.</p>
  
  <p>Sooo.... WTF?  IE's (crappy) debugger displays no script errors or anything of that nature.  Has anybody ever dealt with this kind of issue before?  Again, I add emphasis to the fact that on my development server (127.0.0.1), IE has no problems, and it seems to use the same "mode" (IE8 Standards) and everything.</p>
  
  <p>EDIT: Here is the Javascript powering the AJAX lookup:</p>
  
  <pre><code>jQuery('.ajax-panel').live('load', function(event, request_string){
      var panel = jQuery(this).stop(true).fadeTo(100, 0.2).addClass('loading');
      var form = jQuery(panel.attr('rel'));
      jQuery.get(form.attr('action'), request_string ? request_string : form.serialize(), function(response){
  
          // WTF?
          // panel[0].innerHTML = response;
          panel.empty().append(response);
  
          // Carry on.
          panel.removeClass('loading').stop(true).fadeTo(100, 1);
      });
  });
  </code></pre>