Different ways of creating a div

Question

Is there any significant difference in how the new DOM element is created? Are there any advantages/disadvantages of using one way over another or does it come down to personal preference? I usually use the first way and only recently found out about the second one.

var test1 = $('div#test1'),
    test2 = $('div#test2')
;
// first way
$('<div/>')
    .addClass('mainClass subClass')
    .attr('id', 'someId2')
    .attr('data-extra', 'extraInfo')
    .text('some text')
    .appendTo(test2)
;

// second way
$('<div/>', 
  {
      'class': 'mainClass subClass',
      'id': 'someId1',
      'data-extra': 'extraInfo',
      'text': 'some text'
  })
    .appendTo(test1)
;

There is no noticeable difference. The second one is just more cleaner. — Ram, Jul 21 '15 at 13:49
I guess the second will be slightly faster as it only executes one function and then loops over all the values, but the difference will be negligible. — somethinghere, Jul 21 '15 at 13:50
@somethinghere jQuery calls the corresponding functions behind the scenes. — Ram, Jul 21 '15 at 13:51
@Vohuman so it's the opposite? As in, the individual functions would be faster as your are _not_ wrapping them into _another_ global-er function? — somethinghere, Jul 21 '15 at 13:52
@somethinghere Well, I'm not sure. I meant finally those methods are executed. The performance of those snippets should be tested. Temporarily unavailable http://jsperf.com is useful for these cases. — Ram, Jul 21 '15 at 13:57
JQuery is mainly created to make the use of already existing functions very easy and comfortable by summing things up and providing easier syntax. Thus it also implements many ways of doing the same thing just so you can find out and decide which way is the one you can work best with it. — Benjamin, Jul 21 '15 at 14:10

score 0 · Answer 1 · answered Jul 21 '15 at 13:59

I think different ways are differ in performance , put not completely sure the from the perfect answer

i am using pure javascript

var element = document.createElement("div");
var elementContent = document.createTextNode("My div");
element.appendChild(elementContent);
// add div to body
document.body.appendChild(element);

score -1 · Answer 2 · answered Jul 21 '15 at 13:56

-1

Second example will be faster compared to first.

In case of first. The object is created and returned. And then you are using jquery methods which gets the jquery object of element everytime and sets the new classes/attributes.

In case of second approach, it iterate over the collection of properties to create the dom element along with those attributes and classes.

answered Jul 21 '15 at 13:56

Milind Anantwar

81,290
25
94
125

That's not completely true, Claiming the second snippet is faster is just a guess. jQuery checks the existence of each method (when an object is passed), so that's an overhead. – Ram Jul 21 '15 at 14:00
Other answer on SO do points them to be faster compared to first one. will share the relevant link – Milind Anantwar Jul 21 '15 at 14:11
I'm not claiming the first one is faster as I haven't tested the snippets. – Ram Jul 21 '15 at 14:14

Different ways of creating a div

2 Answers2