Diferencia entre innerHTML y .html () de jQuery

Alguien puede decir cuál es la diferencia entre la función jquery .html () y 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>

Cuando uso la primera opción, que es jQuery, aparece el script dentro de las ejecuciones y aparece la alerta, pero si uso la segunda opción que con el innerHTML (que creo que es el mismo y no hay diferencia entre ellos), el script no funciona ; -

¿Qué podría ser la causa

Respuestas a la pregunta(3)

Su respuesta a la pregunta