Using jQuery, what's the performance difference between using:
$('#somDiv').empty().append('text To Insert')
and
$('#somDiv').html('text To Insert')
?
views:
376answers:
4
+2
A:
.html will overwrite the contents of the DIV.
.append will add to the contents of the DIV.
Nebakanezer
2009-12-14 19:52:57
Does append use DOM? Whereas innerHTML does not?
AppleTrue
2009-12-14 19:53:49
Please note that I have included the empty() function to that append is overwriting like .html. Is .append faster than .html?
AppleTrue
2009-12-14 20:02:19
Not answering the OP's question...
J-P
2009-12-14 20:31:16
@J-P: in all fairness from the timestamps it seems the OP heavily edited the question from typo-ridden to sensible.
Crescent Fresh
2009-12-14 20:33:32
A:
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>
EarthMind
2009-12-14 19:54:15
I've updated my original post to include the empty() function so that they act the same
AppleTrue
2009-12-14 19:55:25
They are exactly the same in terms of result but innerHTML would probably be faster on big files as it just uses the native function, which is only 1 call.
EarthMind
2009-12-14 19:58:30
+8
A:
$('#somDiv').html(value) is equivalent to $('#somDiv').empty().append(value).
Source: jQuery source.
Roatin Marth
2009-12-14 19:55:25
@AppleTrue: slow down on the updates man! ;) I've updated my answer to your latest question....
Roatin Marth
2009-12-14 20:07:09
`.empty().append(...)` will be marginally faster since `.html(...)` is essentially a wrapper for the same thing. Don't use `.empty().append(...)` for the sake of speed, since you wouldn't notice a difference in even several thousand calls, and it would be confusing to someone reading your code.
Blixt
2009-12-14 20:09:58
A:
The correct syntax is
$("#somDiv").html("<span>Hello world</span>");
Pete Nelson
2009-12-14 19:55:29