Best way to create new DOM elements

Question

Using jquery is it better to create a DOM element like this:-

function create(options)
{
     $('<form action="' + options.action + '"></form>');    
}

Or like this:

function create(options)
{
     $form = $('<form></form>');
     $form.attr('action',options.action); 
}

This may be a matter of opinion. I feel that the second way gives more clarity but I suspect it is less efficient...

This is called micro-optimization, also know as "the root of all evil". — JJJ, Feb 23 '12 at 14:42
@Juhana: You're thinking of premature optimization. I don't know why asking about methods of DOM element construction would be considered premature, or even mirco, optimization. From the question... *"I feel that the second way gives more clarity..."* — , Feb 23 '12 at 14:46
*"...but I suspect it is less efficient."* I think it's safe to say that he's not asking because he's pinpointed this issue to be the performance bottleneck in his code. — JJJ, Feb 23 '12 at 14:58
@Juhana: He's asking if one is conceptually better than the others, and is including clarity as a factor. No, the code probably isn't a bottleneck, which means that performance is not his greatest concern, which means this question isn't all about optimization. That said, **not all optimization is "evil"**. If you can gain even a tiny optimization, and not obscure the meaning of the code, why wouldn't you do it? The "evil" of *premature* optimization comes from introducing unnecessary bugs, or obscuring the meaning of the code for the sake of marginal gain. Clearly that's not an issue here. — , Feb 23 '12 at 15:40

Andreas Louv · Answer 1 · 2014-05-20T21:50:11.977

39

Check this to find out for your self.

Creating DOM notes using jQuery Note higher is better (OPS/Sec = operations per second = how many times per second the given code executes)

And the test winner in every other browser than Opera:

var form = document.createElement("form"),
    $form = $(form);
form.action = options.action;

NOTE:

the native method will be even faster if you don't need a jQuery object:

var form = document.createElement("form");
form.action = options.action;

edited May 20 '14 at 21:50

answered Feb 23 '12 at 14:45

Andreas Louv

46,145
13
104
123

+1 If there's any concern about performance *and* clarity, this would take care of both. – Feb 23 '12 at 14:48
+1 I didn't know about jsperf.com - that's very neat, thanks for the introduction! – rgvcorley Feb 23 '12 at 15:03
+1 for jsPerf and suggesting no jQuery. People tend to do everything with jQuery, they should know when it is better or not. – Lennon Feb 17 '14 at 19:06

score 30 · Accepted Answer · edited May 23 '17 at 12:34

30

jQuery can create object as following code

$form = $('<form>', {action: 'my action'});

class is a reserved word in IE and needs to be quoted. See full list of reserved words: Reserved Keywords in Javascript

edited May 23 '17 at 12:34

Community

1
1

answered Feb 23 '12 at 14:42

komelgman

6,949
2
18
18

+1 Beat me to it. Although you should always include the closing tag as some (now outdated) browsers won't add this automatically: Eg. `$('
', {action: 'my action'});` – Rory McCrossan Feb 23 '12 at 14:44
not only outdated. Had a problem with IE8 about not closed `form`-tag, you can do it like this `$('
')` – Andreas Louv Feb 23 '12 at 14:48
5

I'd class IE8 as outdated personally :D – Rory McCrossan Feb 23 '12 at 14:48
[$('') vs $('')](http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent) – komelgman Feb 23 '12 at 14:48
@RoryMcCrossan: Closing tag isn't necessary if you're not including attributes or content. jQuery will use `document.createElement()` whether you do `$('
')`, `$('
')` or `$('
')` – Feb 23 '12 at 14:49
Pefect - this way performed very well on the benchmark by @AndreasAL and it's good and clear. Thankyou! – rgvcorley Feb 23 '12 at 15:00
I wonder if it'll be even faster if you cache the `
` first, then `.clone()` it. i.e. `var form = $('
'); form.clone().attr({ action : 'my action' });`
– Richard Neil Ilagan Feb 23 '12 at 15:01
1

`update: attr class must be quoted (bug in IE)` === `reserved word in IE` – Andreas Louv Oct 15 '12 at 00:29

score 4 · Answer 3 · answered Feb 23 '12 at 14:44

4

I always do the second one.

function create(options)
{
     $form = $('<form></form>');
     $form.attr('action',options.action); 
}

I prefer this method simply because it find it more readable.

answered Feb 23 '12 at 14:44

Dave Becker

1,433
1
12
24

score 3 · Answer 4 · answered Feb 23 '12 at 14:45

Never hurts to optimize...until it does...you could use straight up JS:

function create(options)
{
  var newform = document.createElement('form');

  newform.setAttribute('action',options.action);
}

Aside from that it's negligible as mentionned above, whatever is easier to read for you...i.e. option 2

score 1 · Answer 5 · answered Feb 23 '12 at 14:42

1

Unless you are running this function many times, any performance difference will be negligible. So I would always go with the clearest, easiest to update solution (i.e. the second one.)

answered Feb 23 '12 at 14:42

lamplightdev

2,041
1
20
24

@NateBarbettini Sounds very much like an answer to me? – Anders Nov 07 '15 at 15:47

score 0 · Answer 6 · answered Feb 23 '12 at 14:46

Not sure about the actual underlining code of jquery and cannot tell which one has better performance.

Anyway as I can imagine, in the first case jquery will parse attributes anyway and sets values to them, so there should not be big performance difference.

So I think the first solution is more convenient if it contains a lot of html code, otherwise I will prefer second one.

Best way to create new DOM elements

6 Answers6