Difference between innerHTML and .html() from jQuery

Question

Can somebody tell what is the difference between jquery .html() function and innerHTML?

Answer 1

I think this is the correct way:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>

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

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

Why you insert java script alert in to div?

Answer 2

jQuery's .html() method is a multipurpose function for accessing and manipulating innerHTML. When used as a setter, it returns the jQuery collection for chaining. When used as a getter, it returns the markup representation of the collection elements' innards.

When you use it as a setter--to write markup into an element--jQuery reads the markup and extracts scripts from within. It then adds them to the DOM separately in a manner that causes their execution. .html() implicitly causes a few operations (script handling being one) whereas writing to innerHTML simply causes the innerHTML to change, but very little is done with that HTML.

Answer 3

Setting the innerHTML property does not execute scripts.

jQuery contains special code to execute scripts for you.