STOP, I SAY! Instead of implementing innerShiv, please check out the new html5shiv from aFarkas and jonathantneal. Their updated shim patches for the same issues innerShiv addresses, and makes innerShiv itself redundant.
http://html5shiv.googlecode.com/
innerShiv is happily retired! Please do not disturb its peaceful slumber!
Additional to the above message: I recently changed my GitHub handle from @jdbartlett to @redoPop and created this account and fork to make sure I don’t break any prior references to my code. The canonical version of this repository is now:
http://github.com/redoPop/innershiv
Should the need arise to reopen this project (heaven forbid!) it will be that version I reopen, and not this fork.
Thanks.
Even with HTML5shim, this section won’t be styled in IE < 9:
var s = document.createElement('div');
s.innerHTML = "<section>Hi!</section>";
document.body.appendChild(s);
innerShiv is a workaround.
This is the verbose documentation. If you just want the skinny and the script, go here!
The HTML5shim fixes styling static HTML5 documents in old IE, but its reach is limited to the document itself. HTML5 elements that are created before they’re appended to the document fall outside its tender and loving embrace. That’s a common use case, and noticeable in libraries like jQuery when you try to .append() or .load() HTML5 content.
innerShiv("<section>html string</section>")
innerShiv is a function which takes your HTML5 string and returns an IE-safe document fragment or element collection shim’d to work with old IE.
When creating a jQuery object from innerShiv, you should pass a second parameter — boolean false — which instructs innerShiv to return an array of elements instead of a document fragment:
$(innerShiv("<section>html string</section>", false))
This enables you to do further manipulation before inserting your content into the document. If the jQuery/collection return parameter is not passed, you cannot perform additional manipulations in jQuery.
A lot of people ask how to use innerShiv with jQuery’s .load() method. This gist provides an alternative method .loadShiv(), which is based on and acts like jQuery’s .load() but passes incoming HTML through innerShiv before adding anything to the DOM. Download loadShiv separately and add it to your project, then simply call .loadShiv() instead of .load().
If you’re loading an entire content fragment straight into the document (i.e., if you’re .load()ing into an element that’s currently attached the already-shim’d document, and you’re not including a selector in .load()‘s url parameter), you don’t need to use loadShiv or innerShiv. innerShiv is only needed when you’re setting the innerHTML of an element outside the shim’d document, something jQuery has to do when using a selector on loaded content or when loading content into an element that’s not attached to the document.
Please note that, to keep its filesize down, innerShiv doesn’t provide all the robustness of jQuery’s HTML parsing. For example, it strips inline scripts from the HTML without parsing them.
This script is completely, totally, and utterly free. It comes without any warranty, to the extent permitted by applicable law. You can redistribute it and/or modify it under the terms of the Do What The Fuck You Want To Public License, Version 2, as published by Sam Hocevar. See here for more details.