Search code examples
javascriptjqueryappendimagemap

jquery append function converting < > to entity name

I am using getJSON to get a JSON file and then build the image map hotspots based on the data retrieved. This is being used in a seating chart application where the station numbers stay the same, but the name of the individuals always change.

After I get the data I loop trough it and create the image hotspots like this (I am using # as a place holder for the href for now).

 $('#maphall').append('< area class="'+ val.class +
 '" shape="'+val.shape+'" href="'+val.href+'" id = "'+
 val.id+'" coords='+val.coords+' />');

When I look at the generated code in FireFox I see:

&lt; area class="room" shape="rect" href="#" id = "2B" coords="160,56,279,109" /&gt;

How do I get the < and > to appear instead of &lt; and &gt; ?

Solution

  • HTML parsers will treat a < followed by a space as a less than sign and not the start of a tag.

    Serialising the DOM back to HTML will show it as an entity.

    Write valid HTML. Remove the space.