Question

I have this piece of code which works in Firefox

link = $('<a>link</a>');
var name = $("<h3 class='name section'>").append(link);
$('#container').append(name);

However this doesn’t work in IE8. It seems that name doesn’t get created at all. I tried adding console.log('class of name'+name.attr('class')); and inside the Developer Toolbar, the result is undefined.

Hence I look around for another option, and this works:

var name = $('<h3>');
name.addClass('name');
name.addClass('section');
name = name.append(link);

It does exactly the same thing. I was wondering if IE8 has a thing against using HTML to define DOM fragments, so I tried this:

var name = $("<div class='name section'>").append(link);

And this works in IE8.

What esoteric law of jQuery/IE8 did I break? Is it preferable to use addClass or setting the attribute of new DOM fragments over literal HTML?

Answer 1

If you make the HTML code correct by adding an ending tag to the h3 tag, it works:

link = $('<a>link</a>');
var name = $("<h3 class='name section'></h3>").append(link);
$('#container').append(name);