I need to know which of these two JavaScript frameworks is better for changing dynamic client-side content for known DOM elements (by id) in terms of performance, memory usage, etc.:
- The prototype is $ ('id'). update (content)
- jQuery jQuery ('# id'). html (content)
EDIT: My real problems are clarified at the end of the question.
By the way, both libraries coexist without conflict in my application, because I use RichFaces to develop JSF, so I can use "jQuery" instead of "$".
I have at least 20 updated areas on my page, and for each I prepare content (tables, lists of options, etc.) based on specific user filtering criteria on the client side or some AJAX event, etc. eg:
var html = [];
int idx = 0;
...
html[idx++] = '<tr><td class="cell"><span class="link" title="View" onclick="myFunction(';
html[idx++] = param;
html[idx++] = ')"></span>';
html[idx++] = someText;
html[idx++] = '</td></tr>';
...
So, the question is which is better to use:
$('myId').update(html.join(''));
jQuery('#myId').html(html.join(''));
Other necessary functions are hide () and show (), which are present in both frames. What's better? I also need to enable / disable form controls and read / set their values.
Please note that I know my identifier for the updated region (I don’t need CSS selectors at the moment). And I have to say that I store these requested objects in some data structure for later use, so they are only requested once when the page is displayed, for example:
MyData = {div1:jQuery('#id1'), div2:$('id2'), ...};
...
div1.update('content 1');
div2.html('content 2');
, ?
: , :
- ( , jQuery ), OTOH DOM Prototype ( Richfaces).
- () ( ?) DOM. , Prototype innerHTML - . jQuery, , "empty()" .
, ...