div nested inside a gives weird innerHTML result in FireFox

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?

---

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>.