What is the difference between .empty().append() and .html()?

Using jQuery, what's the performance difference between using:

$('#somDiv').empty().append('text To Insert')

开发者_如何学JAVAand

$('#somDiv').html('text To Insert')

?

$('#somDiv').html(value) is equivalent to $('#somDiv').empty().append(value).

Source: jQuery source.

.html will overwrite the contents of the DIV.

.append will add to the contents of the DIV.

difference between append() and html() in jQuery

.append() and .html() are the most useful methods in jQuery. But these are far different from one another, .append() add some value to the existing one. Where .html() do the same but it removes the old value first.

Here is an example:

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

In simple words:

$('#somDiv').append('blabla')

works like this:

<div id='somDiv'>some text</div>

becomes:

<div id='somDiv'>some textblabla</div>

And innerHTML replaces the contents, so it becomes this:

<div id='somDiv'>blabla</div>

The correct syntax is

$("#somDiv").html("<span>Hello world</span>");