difference between append() and html() in jquery

.aapend() 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
Here is an example is given

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

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