Menu
I have created a test case at http://jsperf.com/jquery-html-vs-empty-append-test to compare the performance of $.html() with $.empty().append(). I wondered that .empty().append() is faster.
Can anyone explain this performance gap?
Thanks.
827
EVERYTHING I know on the topic says that working with the DOM ranges around 200 times faster than innerHTML.
The use of innerHTML very slow: The process of using innerHTML is much slower as its contents as slowly built, also already parsed contents and elements are also re-parsed which takes time.
Answer : appendChild is used to insert new node in DOM. innerHTML is a property of DOM that allows to replace content of an element with different HTML, which automatically gets parsed into DOM nodes.
append insert the parameter element inside the selector element's tag at the last index position, whereas the . after puts the parameter element after the matched element's tag.
In your code $.empty().append() was running faster because, your selector was wrong,
You should have used var $test = $("#test"); instead of var $test = $("test"); for comparision.
See the DEMO Here.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
