jQuery ajax code loading scripts as text, but some of the code is being processed
Question: I am working on a block of code and it is doing something funny. I wrote this
for a site that I am working on to load a url from an XML file and insert the
code from a server side file into the pre tag as a way of showing the code I
developed for a class. This block works just fine for both Python and MEL
scripts, but when I tried to load the scripts for the site itself (javascript
and xml) which I developed as a side project for the class, it tries to
evaluate parts of it. Specifically, the HTML tags tags that are inside of the
code. I am unsure of how to stop this from happening. It isn't direly
important that I have this, I would just like to show off the work that I did
that was above and beyond the rest of the class for potential future
employers. I am really proud of the site as it sits.

    
    
    id = $(this).attr("id");
    $("#"+location+"_code").append("<a href='"+$(this).attr("src")+"' class='download' download/><dt>"+$(this).attr("title")+"</dt><dd><pre id='"+id+"'></pre></dd>");
    $.ajax({
        url:$(this).attr('src'),
        dataType: "text",
        async: false,
        success: function(data) {
            $("#"+id).append(data);
        }
    });
    

How do I prevent the browser from actually processing the text as anything but
text? I really was hoping that this would just display the code as a straight
string. I thought about using a textarea instead of a pre, but that just
caused a host of other issues that I didn't feel like dealing with. Any
suggestions?


Answer: You need to HTML encode your result so it displays as text. Try this:

    
    
    var $result = $('<div/>').text(data);
    $('#' + id).append($result);
    

