Asked  6 Months ago    Answers:  5   Viewed   32 times

Recently I've been doing a lot of modal window pop-ups and what not, for which I used jQuery. The method that I used to create the new elements on the page has overwhelmingly been along the lines of:

$("<div></div>");

However, I'm getting the feeling that this isn't the best or the most efficient method of doing this. What is the best way to create elements in jQuery from a performance perspective?

This answer has the benchmarks to the suggestions below.

 Answers

94

I use $(document.createElement('div')); Benchmarking shows this technique is the fastest. I speculate this is because jQuery doesn't have to identify it as an element and create the element itself.

You should really run benchmarks with different Javascript engines and weigh your audience with the results. Make a decision from there.

Tuesday, June 1, 2021
 
THEK
answered 6 Months ago
44

Extract options into a temporary array, sort, then rebuild the list:

var my_options = $("#my_select option");
var selected = $("#my_select").val();

my_options.sort(function(a,b) {
    if (a.text > b.text) return 1;
    if (a.text < b.text) return -1;
    return 0
})

$("#my_select").empty().append( my_options );
$("#my_select").val(selected);

Mozilla's sort documentation (specifically the compareFunction) and Wikipedia's Sorting Algorithm page are relevant.

If you want to make the sort case insensitive, replace text with text.toLowerCase()

The sort function shown above illustrates how to sort. Sorting non-english languages accurately can be complex (see the unicode collation algorithm). Using localeCompare in the sort function is a good solution, eg:

my_options.sort(function(a,b) {
    return a.text.localeCompare(b.text);
});
Thursday, June 3, 2021
 
BrunoRamalho
answered 6 Months ago
61

You can go with following selector

$('div:not(:has(*))')

Above selector will select all the DIVs who don't have any children.

Monday, August 2, 2021
 
Laimoncijus
answered 4 Months ago
66

Check this link. I have put one that already exist. And when you click add button it creates dynamicly as well. When you Click the set button it finds them with a java query and puts them into a for loop that changes each ones value one by one.

http://cr8code.co/editor.php?workid=1a446530189d751d0b15ce104a286eee

Here is the DEMO

Tuesday, August 31, 2021
 
Daniele Piccioni
answered 3 Months ago
73

You are correct about circular references, that isn't an issue outside of IE, and in IE it only becomes an issue when JavaScript has a reference to a DOM object, and a JS object is assigned to one of the DOM object's properties. I believe this can be resolved by simply by nullifying any references in JS to the DOM object.

The $().data() method is an overly complicated wrapper for $.data() (see jQuery.fn.data: http://github.com/jquery/jquery/blob/master/src/data.js#L126, which in turn calls jQuery.data: http://github.com/jquery/jquery/blob/master/src/data.js#L20), so cutting out that middle man will save a non trivial amount of time, especially if it's to be done 500 times.

In this case, the $().data('foo', 'bar') method doesn't do much more than el.foo = 'bar'. Do what's fastest.

Tuesday, September 28, 2021
 
mpen
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share