Site icon Dotnet Helpers

.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

Exit mobile version