Difference between innerHTML and .html() from jQuery

Question

Can somebody tell what is the difference between jquery .html() function and 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>

When I use first option, that is jQuery, script inside runs, and alert shows up, but if I use second option that with the innerHTML (which I though is the same and there is no difference between them), script is not working ;-(

What could be the cause?

JAAulde · Accepted Answer · 2011-03-22 11:41:10Z

10

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.

answered Mar 22, 2011 at 11:41

JAAulde

19.5k5 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kuba Over a year ago

OK, but where this extraction is in jQuery library code? I didn't found it in .html() (maybe this is because I'm not really Javascript kungfu master:)) I'm just trying to understand this case as much I can :)

JAAulde Over a year ago

.html() uses .append() which uses domManip() which does the script sniffing and execution.

kuba Over a year ago

Ok, It seems that this domManip() is the key function :-) Thank you :-)

SLaks · Accepted Answer · 2011-03-22 11:39:24Z

7

Setting the innerHTML property does not execute scripts.

jQuery contains special code to execute scripts for you.

answered Mar 22, 2011 at 11:39

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

4 Comments

Ikke Over a year ago

I have looked into the source, but I couldn't find anything special in there that would execute scripts. As a matter of fact, it tries to used innerHTML itself.

kuba Over a year ago

Yes, exactly, there is also comment inside .html() that says that they first check if they can use just simple innerHTML

JAAulde Over a year ago

@Ikke .html() uses .append() which uses domManip() which does the script sniffing and execution.

Ikke Over a year ago

@JAAulde Ah, right. It checks with the rnocache pattern if there is a scripttag inside, and skips the innerHTML part.

Faraona · Accepted Answer · 2011-03-22 11:41:55Z

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

answered Mar 22, 2011 at 11:41

Faraona

1,7002 gold badges22 silver badges33 bronze badges

1 Comment

kuba Over a year ago

alert is for testing purpose only, there is other JS code instead alert. Whole idea is not mine, I'm just refactoring the code:)

Collectives™ on Stack Overflow

Difference between innerHTML and .html() from jQuery

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related