div nested inside a gives weird innerHTML result in FireFox

Question

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?

Answer 1

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

Answer 2

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'