What's the best way to create new elements?
-
jQuery('body').append('<div id="my-div" style="background: #fff">my text</div>');
-
jQuery('<div/>').attr('id', 'my-div').css('background', '#fff').html('my text');
-
jQuery('<div/>', {id: 'my-div', html: 'my text', css: {background: '#fff'}});
So what's the best way? Maybe you have something else?
source to share
The third solution is the shortest, easiest to read and expand, and is generally considered the cleanest, although the second, which does not require iterating over properties, might be slightly faster.
The former is slower because it asks the browser to parse the HTML (and also because it is the only one adding an element to the DOM, as Jan pointed out).
Here's a performance test: http://jsperf.com/add-element
But you can do as you please, in truth. Even the difference in speed rarely matters here.
source to share
I think nr. 3
1.) if you want to change or access the div you need to call the selector after adding!
2.) many method calls, but by all jquery definitions
3.) fastest method with one meethod call
you forgot to call jQuery('body').append(yourGeneratedDiv);
after 2.) and 3.) solution
source to share
Here is my opinion. If someone correct me wrong. For example, if I get a full line of HTML, I use the first one because it will be faster. For example, if I am getting the config of an item from different sources, for example you can say that the model in MVC that you are actually creating the item from, then the 2nd 3rd method is convenient. The second and third methods are almost the same. In the second method, you are just chaining, but that will make things messier. This is much slower than just adding HTML like in the first method. The 3rd method will just iterate over all the properties of the passed object and build it. But if you want to do the same using cleaner JavaScript, here is the code
var div = document.createElement('div');
div.innerHTML = "Your HTML Content";
div.id = "someID";
div.cssText = "Your CSS Code" // or you can use below way
var divStyle = div.style;
divStyle['background-color'] = "#CCC" // Like this
document.getElementById('parentDIV').appendChild(div);
Here's a speed comparison between jquery way and native way
But again,
If you add a lot of widgets on the fly, my suggestion is to create HTML content based on configuration and usage innerHTML
, this is very fast than appendChild every time. I have tested and observed this.
My suggestion would be, please, avoid jQuery whenever you don't really need it, I agree that it is the most powerful DOM library ever, but applying where you don't really need it will decrease your performance.
source to share