CODEWITHSUNDEEP
javascriptjqueryperformance
Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5291

jquery html() vs empty().append() performance

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.

Upvotes: 7

Views: 7313

Answers (3)

akbarbin
akbarbin

Reputation: 5105

In this section you should use innerHTML. because this is native Javascript.

see the http://jsperf.com/jquery-append-vs-html-list-performance/27

Upvotes: 0

Manu M
Manu M

Reputation: 1064

Use the selector correctly in jquery,

  $('#test').html('Example');

will be faster obviously than

  $.empty().append();

But

  $('test')

will search the DOM for an element with tag name 'TEST'.

Upvotes: 0

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

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.

Upvotes: 4

Related Questions