Question

I am having an issue with getting html 5 to work on elements added to the body in IE. I am using the HTML 5 shiv included in Modernizr but it is the same problem with any other HTML 5 library.

It works fine for any element except HTML 5 elements added directly to the body, which gives the same error message as if I was using jQuery without the shiv (Unexpected call to method or property access). This is a breaking example in IE (7, 8) with Modernizr or html5.js loaded:

$(document).ready(function() 
{
    $('body').append('<nav class="test"></nav>');
    $('.test').html("Testing HTML 5");
});

Any ideas why this might happen?

Answer 1

Joe Bartlett adressed your problem in this article. He explaines the problem and shows a solution (HTML5 innerShiv) for it.

The solution for IE8 and below would be to insert his script and than wrap all your html5 content in an innerShiv(...) before inserting it into the dom

$("body").append(innerShiv("<nav class=\"test\"></nav>"));