How to "enable" HTML5 elements in IE that were inserted by AJAX call?
- by Gidon
IE 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: http://remysharp.com/2009/01/07/html5-enabling-script/
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 HTMLUnknownElement as supposed to HTMLGenericElement (in IE debugger).
Does anybody know a work around for that, so that newly added elements will be recognized/enabled by IE?
Here is a test page:
<html><head><title>TIME TEST</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<time>some time</time>
<hr>
<script type="text/javascript">
$("time").text("WORKS GREAT");
$("body").append("<time>NEW ELEMENT</time>"); //simulates AJAX callback insertion
$("time").text("UPDATE");
</script>
</body>
</html>
In IE you will see the: UPDATE , and NEW ELEMENT.
In any other modern browser you will see UPDATE, and UPDATE
Solution
Using the answer provided I came up with the following piece of javascript to HTML5 enable a whole bunch of elements returned by my ajax call:
(function ($) {
jQuery.fn.html5Enable = function () {
if ($.browser.msie) {
$("abbr, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video", this).replaceWith(function () {
if (this.tagName == undefined)
return "";
var el = $(document.createElement(this.tagName));
for (var i = 0; i < this.attributes.length; i++)
el.attr(this.attributes[i].nodeName, this.attributes[i].nodeValue);
el.html(this.innerHtml);
return el;
});
}
return this;
};
})(jQuery);
Now this can be called whenever you want to append something:
var el = $(AJAX_RESULT_OR_HTML_STRING);
el.html5Enable();
$("SOMECONTAINER").append(el);
See http://code.google.com/p/html5shiv/issues/detail?id=4 for an explanation about what this plugin doesn't do.
