In IE 8, jQuery acts as I would expect:

$('div',$('<a><div></div></a>')).html('test').html()
"test"

In FireFox:

$('div',$('<a><div></div></a>')).html('test').html()
"<a>test</a>"

It puts anchors around what I wanted. Does anyone know why this would happen?

EDIT: Setting this with plain javascript (i.e. setting innerHTML) causes the problem. So I guess my real question is: why does firefox change what I set? Is this part of some esoteric specification, or is it a bug?

In IE 8, jQuery acts as I would expect:

$('div',$('<a><div></div></a>')).html('test').html()
"test"

In FireFox:

$('div',$('<a><div></div></a>')).html('test').html()
"<a>test</a>"

It puts anchors around what I wanted. Does anyone know why this would happen?

EDIT: Setting this with plain javascript (i.e. setting innerHTML) causes the problem. So I guess my real question is: why does firefox change what I set? Is this part of some esoteric specification, or is it a bug?

• javascript
• jquery
• firefox
• innerhtml

4 Answers 4

Wrapping an <a> around a <div> is invalid html. Maybe Firefox is fixing it for you on the fly and returning the valid html?

well, firefox maybe knows you're breaking the rules.

but it did not know you did if you use .append().

$('div',$('<a><div></div></a>')).html('').append('test').html(); // give you 'test'

Not sure if it applies here (as we dont know which doctype you're using) but wrapping an <a> around a <div> is perfectly valid in html5, but Firefox obviously isn't up to speed on that yet. I'm guessing FF4 will be though

Had the same issue with Firefox 3.6.18 (4.x, 5.x renders page correctly). Quick and dirty fix which I came up was to wrap everything inside <a> with <span>.