Can't insert html code in <map> with firefox

[Ivoire]

I tried ".html()" and ".append()" - both didnt work with firefox. It didnt write any code in the tag. So i used javascript ".innerHTML" which worked on both browsers (ie and firefox)

javascript document.getElementById("map").innerHTML = html;

jquery $("#map").html(html); $("#map").append(html);

html <map id="map"> </map>

[Ivoire]

I want to add that it only doesn't work if i try to add a <area> tag

[dmethvin]

As the jQuery docs say, jQuery implements .html() and other methods that take HTML strings by injecting the given string into the innerHTML property of a DIV. If you try to insert content that is not valid within a DIV, it won't work. The AREA tag is only valid within a MAP. If you want to use jQuery .html(), create a full valid HTML fragment by including the MAP tag and nest the AREA within that.

[dmethvin]

Actually, there may be a simple fix for this in {{{jQuery.clean}}. Can you provide a full test case?

[Ivoire]

attached a simple testfile. this example works fine with ie. But if you try it in firefox it only work if you use the "document.getElementById("map").innerHTML = html;" which i commented. Hope this helps, previous snippet was to short as i saw.

[Ivoire]

sry - path to jquery is local in this testfile

[borg42]

"As the jQuery docs say, jQuery implements .html() and other methods that take HTML strings by injecting the given string into the innerHTML property of a DIV. If you try to insert content that is not valid within a DIV, it won't work."

I don't see it in the documentation, but it seems important. Please add this (or a link to the page that contains this info) to ​http://docs.jquery.com/Html .

(BTW, it'd be nice if there were a gotcha/caveat section on the help pages.)

[Ivoire]

If you take a look at the attachment (imageMapTest.html) i have added you can see that i dont use any div in this example. I only want to add a AREA tag to the MAP. Nevertheless it doesnt work with firefox.

[borg42]

Ivoire: AFAIK his point is that when you use .html(someHtmlCode), the variable someHtmlCode should contain html that would be valid html if you'd insert it to a div (and an area without a map is invalid in a div). That is, it seems you can't use .html() like that, simply because it's not supported by jQuery. You should generate the map+area tags into someHtmlCode and them append all this to the body.

I'm not sure if it's true/right or not, I'm only describing what he says.

[Ivoire]

Ok thx for the info, misunderstood first reading it...

[dmethvin]

Yep, that's what I meant. As for the possible solution, we could wrap the AREA tag in a MAP inside the DIV, then strip out the MAP. There are several other cases where that already has to be done, particularly for tables.

[john]

Fixed. ​http://github.com/jquery/jquery/commit/209278915592fc63bd62039e246046d446d329e0

[dmethvin]

#4582 is a duplicate of this ticket.

[anonymous]

Not working in jQuery 1.4.4

[jitter]

Replying to anonymous:

Not working in jQuery 1.4.4

Please submit a reduced test case, which reproduces the issue you are experiencing, on ​http://jsfiddle.net. So that we can investigate this issue further. Also make sure to read the link given below, in order to provide a most useful bug report.

---

​How to report bugs