Why does this execute the <script>:

$('#jq_script').html("<script>$('#test').text('test');<\/script>");

But this doesn't?

document.getElementById('js_script').innerHTML = "<script>$('#test').text('test');<\/script>";

You can see it in action here

From jQuery's documentation about .html():

This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

Why does this execute the <script>:

$('#jq_script').html("<script>$('#test').text('test');<\/script>");

But this doesn't?

document.getElementById('js_script').innerHTML = "<script>$('#test').text('test');<\/script>";

You can see it in action here

From jQuery's documentation about .html():

This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

• javascript
• jquery
• innerhtml

• Maybe you have a typo '#jq_script' | getElementById('js_script') – Eternal1 Commented Feb 12, 2014 at 17:04
• because a jQuery developer coded it to make it work. – epascarello Commented Feb 12, 2014 at 17:11

1 Answer 1

html is a jQuery function. innerHTML is a non-standard (but well supported) property.

If you look at the code you will see that .html() parses scripts, and evals them.

To find it in the source:

Find the html declaration: https://github./jquery/jquery/blob/1.11.0/src/manipulation.js#L564-604

See it does .append. append in turn calls DomManip[ulate] which will parse and eval scripts.

Relevant bit in DomManip[ulate]: https://github./jquery/jquery/blob/1.11.0/src/manipulation.js#L684-709