lguém pode dizer qual é a diferença entre a função jquery .html () e innerHTM

<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>

Quando eu uso a primeira opção, que é jQuery, o script é executado dentro e o alerta aparece, mas se eu usar a segunda opção com o innerHTML (que eu acho que é o mesmo e não há diferença entre eles), o script não está funcionando ; -

O que poderia ser a causa