CODEWITHSUNDEEP
javascriptjqueryfirefoxinnerhtml
Xodarap
Xodarap

Reputation: 11849

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?

Upvotes: 2

Views: 1151

Answers (4)

Marcin Probola
Marcin Probola

Reputation: 11

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

Upvotes: 1

Mike
Mike

Reputation: 678

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

Upvotes: 1

Reigel Gallarde
Reigel Gallarde

Reputation: 65274

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'

Upvotes: 3

hookedonwinter
hookedonwinter

Reputation: 12666

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

Upvotes: 5

Related Questions