CODEWITHSUNDEEP
javascriptjqueryhtml
Nitin Aggarwal
Nitin Aggarwal

Reputation: 215

which way of creating and appending an element is faster in jQuery?

I need to append some div elements to my page. There are two ways: Way 1 (appending a complete string):

$('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'><label class='control-label'>Question<span class='quesNo'>"+ quesNo +"</span>: <span class='q'>" + title +"</span></label></div>")

Way 2(cloning html element, populating it and then appending):

var question = $('div.sampleQuestionLayOut').first().clone(true);
question.removeClass('sampleQuestionLayOut');
question.removeAttr('style');

question.attr('id', 'foo');
question.attr('data-quesid', 'foofaa');
......so on

$('#page123').append(question);

Obviously, in way 2, I am writing a sample html element to select it and populate it and append. In my html file:

<div id='' class='checkbox sampleQuestionLayOut' data-quesid='' style='display:none'>
  <label class='control-label'>
    Question
    <span class='quesNo'></span>: 
    <span class='q'></span>
  </label>
</div>

Now I may be appending such question 20 times on my page. Which of the above way is more efficient in terms of performance and also which is a better way to code?

Upvotes: 1

Views: 227

Answers (3)

Danilo
Danilo

Reputation: 2686

The first method ought to be little bit faster, because it deals less with the DOM.

Here is a small test using performance.now() to measure execution time:

$(function() {

  var s1 = performance.now();
  $('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'><label class='control-label'>Question<span class='quesNo'>2</span>: <span class='q'>2</span></label></div>")
  var e1 = performance.now();
  console.log('StringAppend: ' + (e1 - s1) + ' ms');

  var s2 = performance.now();
  var question = $('div.sampleQuestionLayOut').first().clone(true);
  question.removeClass('sampleQuestionLayOut');
  question.removeAttr('style');
  question.attr('id', 'foo');
  question.attr('data-quesid', 'foofaa');
  question.html("<label class='control-label'>Question<span class='quesNo'>1</span>: <span class='q'>1</span></label>")
  $('#page123').append(question);
  var e2 = performance.now();
  console.log('CloneAndAppend: ' + (e2 - s2) + ' ms');

})

https://jsfiddle.net/s1odw6pg/1/

I might add that generally speaking you should try to minimize the number of invocations of the append() method and thus the DOM-manipulations operations. If your elements need to appear one after another you can build a big HTML-string and append it all together. An interesting resource to see different approaches to this is the following: http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

Upvotes: 1

overburn
overburn

Reputation: 1234

As it is, the first method should be marginally faster as it doesn't seek the template element first. As for best practice, I'm unsure. I'd prefer the second , but it can get pretty subjective.

[WRONG] The second approach should be faster, as it wouldn't need to parse the markup as well.

Edit- i should really pay more attention. I quickly skimmed through it and thought you were creating it from scratch in method 2. (which would have been the fastest way)

Upvotes: -1

Hernas
Hernas

Reputation: 11

In this case, the best way to achieve the best performance with jQuery is to create the whole markup (using a string) and call .append(string) only once (option #1).

Doing that, you'll just be working with the DOM once (where Javascript is slower) instead of multiple/several times (option #2).

Upvotes: 1

Related Questions