Différence entre innerHTML et .html () de jQuery

Quelqu'un peut-il dire quelle est la différence entre jquery .html() et la fonction innerHTML?

<script type="text/javascript">
$(document).ready(function(){
            $('#test_link').click(function(){

                //$('#div_test_out').html("<div width='250px' height='100px' id='div_test'><script language='javascript'>alert('insider');<\/script>asddsa</div>");
                document.getElementById('div_test_out').innerHTML="<div width='250px' height='100px' id='div_test'><script language='javascript'>alert('insider');<\/script>asddsa</div>";      
            });
});
</script>
<a href="#" id="test_link" >TEST LINK :-)</a><br/><br/>
<div width="100px" height="100px" id="div_test_out"></div>

Lorsque j'utilise la première option, c'est-à jQuery, script s'exécute, et d'alerte s'affiche, mais si j'utilise la deuxième option que avec le innerHTML (qui je pense est le même et il n'y a pas de différence entre eux), le script ne marche pas ;-(

Ce qui pourrait être la cause?

source d'informationauteur kuba