Why does html() execute JavaScript, but innerHTML doesn't?

Question

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.

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.com/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.com/jquery/jquery/blob/1.11.0/src/manipulation.js#L684-709