jquery - How do I encode HTML characters within Javascript functions? -

to javascript experts question might basics. i'm using jquery , working on tooltip created jquery.flot.

the following part of javascript function within html file , need have tooltip div rendered correctly:

$('<div id="tooltip">' + contents + '</div>').css( { 

because div not shown used firebug reason , line of code above shows special characters < , > encoded html entities < , > can see here:

$('<div id="tooltip">' + contents + '</div>').css( { 

i searching several online sources solution , tried things .replace(/lt;/g,'<') or .html().text() , took me more 3 hours nothing helpful.

i works fine on localhost.

full source code:

<script language="javascript" type="text/javascript" src="../javascript/flot/jquery.js"></script> <script language="javascript" type="text/javascript" src="../javascript/flot/jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="../javascript/flot/jquery.flot.categories.js"></script> <![cdata[   <script type="text/javascript">      $(function () {       var data = [ ]]>{e1array}<![cdata[ ];       $.plot($("#placeholder1"), [ data ], {         series: {           bars: {             show: true,             barwidth: 1,             align: "center"           }         },         grid: {           hoverable: true,           clickable: true         },         xaxis: {           mode: "categories",           ticklength: 0         },         yaxis: {           min: 0,           max: 1,           ticks: 0         }       } );     });      var previouspoint = null;     $("#placeholder1").bind("plothover", function (event, pos, item) {       if (item) {         if (previouspoint != item.datapoint) {           previouspoint = item.datapoint;           $("#tooltip1").remove();           showtooltip(item.pagex, item.screeny, item.series.data[item.dataindex][0] + ': ' + item.series.data[item.dataindex][1] + ' einträge');         }       } else {         $("#tooltip1").remove();         previouspoint = null;       }     });      function showtooltip(x, y, contents) {       $('<div id="tooltip">' + contents + '</div>').css( {         position: 'absolute',         display: 'none',         top: 100,         left: x,         border: '1px solid #fdd',         padding: '2px',         'background-color': '#fee',         opacity: 0.80       }).appendto("#e1-container").fadein(0);     }    </script> ]]> <div class="e1-container" id="e1-container">   <div id="placeholder1" class="e1"></div> </div> 

you use appendto(), fine. append node when plothover flot event fired. correct, too. code looks fine, should this:

jquery flot "plothover" event not working

edit: can put js <script> after html.