Bug Tracker

#6878 closed bug (invalid)

Opened August 05, 2010 07:01PM UTC

Closed August 06, 2010 12:39AM UTC

Last modified November 18, 2010 09:55AM UTC

html() has weird behavior for divs nested inside anchors in FireFox

Reported by: Xodarap Owned by:
Priority: undecided Milestone: 1.4.3
Component: manipulation Version: 1.4.2
Keywords: firefox, html, div Cc:
Blocked by: Blocking:
Description

When I use the .html() method to set the inner html of a div which is nested inside an a in firefox 3.5, it wraps what I put inside the html with an a. Sample in firebug:

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

(html should be just plain "test".) This doesn't happen in IE 8 or 7 as far as I can tell. Also doesn't happen if it's a span inside an anchor. I'm using 1.4.2, not sure about other versions.

Attachments (0)
Change History (3)

Changed August 05, 2010 07:10PM UTC by Xodarap comment:1

Just to be clear: I don't mean that jQuery is setting the html wrong, because using FireFox's innerHTML gives the problem:

var x = $('div',$('<a><div></div></a>'));
x.innerHTML = 'test';
alert(x.html()); // alerts '<a>test</a>'

So I think the "bug" is that, in this instance (for reasons I don't understand), jQuery should be using the .empty().append() method instead of the .innerHTML method.

Changed August 06, 2010 12:39AM UTC by dmethvin comment:2

resolution: → invalid
status: new → closed

<a> is an inline element. <div> is a block element. A document with a block element inside an inline element is invalid. Invalid documents may not be rendered or processed in the way you expect.

http://www.w3.org/TR/html401/struct/global.html#h-7.5.3

Changed November 18, 2010 09:55AM UTC by jitter comment:3

priority: → undecided

This is invalid for anther reason. x.innerHMTL is setting the innerHTML property on a jQuery object. You should be doing x[0].innerHTML to work on the actually DOM element.