9.19.2012

jQuery.append() vs jQuery.html()

Difference between append() and html() in jQuery

S.No
jQuery.append()
jQuery.html()
1
.append() add some value with the existing one.
.html() do the same as like .append() but it removes the old value.
Here is an example given to understand the practical difference between .append() and .html(),
<ul id="test">
<li>test</li> 
</ul>
 Now if .append() is used  to add one  <li>,as given below
<script type="text/javascript>" jQuery("#test").append("<li>test1</li>"); </script>
The output of this jQuery will be <ul id="test"> <li>test</li> <li>test1</li> </ul>
 
Now if .html() is used to add one <li>,as provided below

<script type="text/javascript>" jQuery("#test").html("<li>test1</li>"); </script>
The output of this Script will be <ul id="test"> <li>test1</li> </ul>

Here in this example .append() add one extra <li>, whether .html() removes the old one with new one. This is the main difference between .append() and .html() in Jquery 

 Reference:


No comments:

Post a Comment