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

Question

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.

Akhil Sekharan · Accepted Answer · 2013-08-23 04:56:08Z

4

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.

answered Aug 23, 2013 at 4:56

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bit selector is same in both cases.

But its returning an empty jquery Object.

Manu M · Accepted Answer · 2013-08-23 05:13:43Z

0

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

answered Aug 23, 2013 at 5:13

Manu M

1,0645 silver badges18 bronze badges

akbarbin · Accepted Answer · 2013-08-23 06:24:47Z

0

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

answered Aug 23, 2013 at 6:24

akbarbin

5,1151 gold badge31 silver badges31 bronze badges