How do I encode HTML characters within Javascript functions?

Question

to all Javascript experts this question might be just basics. I'm using jQuery and I am working on a tooltip created with jQuery.flot.

The following is a part of my javascript function within an html file and this is exactly what I need to have the tooltip div to be rendered correctly:

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

Because the div is not shown I used Firebug to look for the reason and the line of code from above shows the special characters < and > encoded as html entities < and > as you can see here:

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

I was searching several online sources for a solution and tried things like .replace(/lt;/g,'<') or .html().text() and it took me more than three hours but nothing was 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>

Answer 1

You use appendTo(), which is fine. You append the node only when the plothover flot event is fired. This is correct, too. So your code looks fine, you should probably look into this:

Jquery Flot "plothover" event not working

EDIT: You also can put the JS <script> after the HTML.