$.html renders script as content

Question

For a project i'm dynamically loading content that consist of html and javascript. Until now i was using jquery 1.8.3 but while cleaning up i wanted to update to 1.10.1. I've narrowed my problem down to the way i use the $.html() function on my content div.

In jquery 1.8.3:

var content = $("#content");
contentDiv.html("<script> alert('Testing'); </script>")

shows a alertbox with the content 'Testing', while in newer jquery versions the same code the string is inserted into the DOM and then the alertbox also appears. I'd wish to not have the tags shown.

context javascript:

 this.loadPage = function(page, callback){
    $.get(page.ViewFile, function(view){
        var content = $("#content");
        $("#content").html(view);
}};

The page getting loaded contains, which is stored in the variable view as a string.

<h1>New Content</h1>
<div id="newContent"></div>
<script>
function View(){
    this.InitializeView = function(model){
        //code
    }

    this.UpdateView = function (model){
        //code
    }
 }
 </script>

Can you make a reproducible example on http://jsfiddle.net/? — Blender, Jul 02 '13 at 07:22
If you want to make templates on separate files on server and display it after load, I would suggest that you use backbonejs for this. I see that you have HTML and some methods to be executed. backbonejs is exactly for these kind of things. — EnterSB, Jul 02 '13 at 07:23
The html and javascript with view class are in a different file. For example /index.html?page=Visualization, loads some data and eventually visualisation.html which contains the new content and javascript. Strange thing is, in 1.8.3 everything works just fine, higher versions work, but in addition render the content of the — retanik, Jul 02 '13 at 12:19
A jsFiddle isn't possible i suppose, because of the way they inject the scripting inside their page. — retanik, Jul 02 '13 at 12:25

score 1 · Answer 1 · edited May 23 '17 at 12:21

Seems that the browser detect the </script> (the end of script tag) that is inside of string as a real closing when we put our code in the head of page.

enter image description here

This is the reason why the error is thrown in the webpage (EXAMPLE):

Uncaught SyntaxError: Unexpected token ILLEGAL fiddle.jshell.net/:22

I guess that you have to move your javascript code into a separate file like main.js, for example.

Tested it locally and it works:

HTML

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.js"></script>
        <script src="main.js"></script>
        <script type="text/javascript">
            setTimeout(function () {
                $("body").text("Testing now from HTML: using <script>");
                setTimeout(function () {
                     $("body").html("<script>alert('This alert will fail.')</script>");
                }, 1000);
            }, 2000);
        </script>
    </head>
    <body></body>
</html>

Javascript (main.js)

$(document).ready(function () {
    $("body").html("<h1>Wait one second.</h1>");
    setTimeout(function () {
        $("body").html("<script>alert('Tested')</script>");
    }, 1000);
});

Even the text editors detect it as closing tag:

enter image description here

Solution

1. Create scripts from jQuery

var content = $("#content");

var script = $("<script>");
script.html("alert('Testing');");

content.append(script)

1. Use `&`

Basically you have to replace < with &lt, > with &gt and & with &amp, as described in this answer:

var tagsToReplace = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;'
};

function replaceTag(tag) {
    return tagsToReplace[tag] || tag;
}

function safe_tags_replace(str) {
    return str.replace(/[&<>]/g, replaceTag);
}

For more information see this question.

A solution to this problem can also be, to escape the HTML in the string and decode it on the way out, i.e. http://stackoverflow.com/questions/5499078/fastest-method-to-escape-html-tags-as-html-entities — casraf, Jul 02 '13 at 07:54
Solutions arn't working for me, please see my reaction on Question above — retanik, Jul 02 '13 at 12:20