.append() VS .html()

.append() and .html() is the most usefull method in jQuery.But these are far different from one another,

.append() add some value with the existing one. whether .html() do the same but it removes the old value

HTML :

<ul id=”test”>
<li>test</li>
</ul>

Now use .append() to add one <li>,

<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 I use .html() to add one <li>, For that I will write

<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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.