append() fails with a JS error on IE 6-8 with jQuery created HTML5 elements

[Haprog]

jQuery .append() fails with a JavaScript error on Internet Explorer 6, 7 and 8 when you create a new <nav> element (or any other new HTML5 element) with some content, and then try to append content to it.

var test = $('<nav>Test</nav>');
test.append('append'); /* Fails with an error in IE 6-8 */

Here is a simple test case showing the problem: ​http://www.haprogszone.net/jquery_bug_ie6-8.html (includes the html5shiv but it doesn't seem to affect the problem)

This works in Firefox 6.0.2, Chrome 13, Safari 5.1 and Internet Explorer 9, but fails on IE 6, 7 and 8. Tested on Windows 7 (32bit). The problem occurs on every major version of jQuery I tested including 1.6.4.

Interestingly though (as shown in the above test case URL) the same error does not occur when the created <nav> is first empty

var test = $('<nav></nav>');
test.append('append'); /* Works */

The problem does not occur when dealing with HTML4 elements instead.

[Haprog]

Found out a workaround.

Instead of

var test = $('<nav>Test</nav>');
test.append('append');

you can do

var test = $('<nav/>');
test.html('Test');
test.append('append');

and you will have no problem.

[dmethvin]

You need an HTML5 shiv / shim, ask for help on the forum if you need more help.

[Rick Waldron]

Duplicate of #6485.