title: How to "enable" HTML5 elements in IE 8 that were inserted by AJAX call?
body: <p><em>See the solution at the bottom of the question.</em></p>
  
  <p>IE 8 (and lower) does not work good with unknown elements (ie. HTML5 elements), one cannot style them , or access most of their props. Their are numerous work arounds for this for example: <a href="http://remysharp.com/2009/01/07/html5-enabling-script/" rel="nofollow noreferrer">http://remysharp.com/2009/01/07/html5-enabling-script/</a></p>
  
  <p>The problem is that this works great for static HTML that was available on page load, but when one creates HTML5 elements afterward (for example AJAX call containing them, or simply creating with JS), it will mark these newly added elements them as <code>HTMLUnknownElement</code> as supposed to <code>HTMLGenericElement</code> (in IE debugger).</p>
  
  <p>Does anybody know a work around for that, so that newly added elements will be recognized/enabled by IE 8?</p>
  
  <p>Here is a test page:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;&lt;title&gt;TIME TEST&lt;/title&gt;
      &lt;!--[if IE]&gt;
      &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;time&gt;some time&lt;/time&gt;
      &lt;hr&gt;
      &lt;script type="text/javascript"&gt;
          $("time").text("WORKS GREAT");
          $("body").append("&lt;time&gt;NEW ELEMENT&lt;/time&gt;"); //simulates AJAX callback insertion
          $("time").text("UPDATE");
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In IE you will see the: UPDATE , and NEW ELEMENT.
  In any other modern browser you will see UPDATE, and UPDATE</p>