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

innerhtml, javascript, jquery

Solution

`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 `eval`s 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

Problem

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.

Original source