Skip to main content

Bug Tracker

Side navigation

#8506 closed bug (invalid)

Opened March 11, 2011 05:54PM UTC

Closed March 12, 2011 07:47PM UTC

html() has unexpected behavior when writing to (previously) empty element

Reported by: echovault Owned by:
Priority: undecided Milestone: 1.next
Component: unfiled Version: 1.5.1
Keywords: Cc:
Blocked by: Blocking:
Description

I have a set of tooltip functions that use the title attribute of an element to set the html of a specified tooltip and then show / hide.

All of the tooltips on the page share the same display element, so I just create it without an end tag.

<span id="tooltip" class="tooltipClass" />

In IE when I do $('#' + tooltip).html(text); some html outside of (after) the span is getting overwritten. In my case it happened to be <script> which broke some other things. This did not happen in Firefox.

I finally narrowed it down using

alert($('#' + tooltipid).html());

prior to .html(text), which gave me a screen-sized window showing the next element, a script block.

Fix for me was to write the span in full

<span id="tooltip" class="tooltipClass"></span>

This is actually more appropriate anyway, but since you guys pride yourselves in the cross-browser game, and Firfox handles it either way, I thought it worth mentioning.

Thanks again for an amazing tool.

Attachments (0)
Change History (1)

Changed March 12, 2011 07:47PM UTC by dmethvin comment:1

resolution: → invalid
status: newclosed

The W3C says that self-closing tags are only valid for elements that _cannot_ have children.

http://dev.w3.org/html5/markup/spec.html#span

A span element must have both a start tag and an end tag.

jQuery supports $("<tag />") for content-capable elements like div or span but more complex markup goes through the browsers innerHTML parser and is subject to browser limitations.