Prototype or jQuery for DOM manipulation (client-side dynamic content)

Posted by luiggitama on Stack Overflow See other posts from Stack Overflow or by luiggitama
Published on 2010-06-12T14:46:45Z Indexed on 2010/06/12 14:52 UTC
Read the original article Hit count: 136

Filed under:
|
|
|

I need to know which of these two JavaScript frameworks is better for client-side dynamic content modification for known DOM elements (by id), in terms of performance, memory usage, etc.:

  • Prototype's $('id').update(content)
  • jQuery's jQuery('#id').html(content)

BTW, both libraries coexist with no conflict in my app, because I'm using RichFaces for JSF development, that's why I can use "jQuery" instead of "$".

I have at least 20 updatable areas in my page, and for each one I prepare content (tables, option lists, etc.), based on some user-defined client-side criteria filtering or some AJAX event, etc., like this:

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 here comes the question, which is better to use:

// Prototype's
$('myId').update(html.join(''));
// or jQuery's
jQuery('#myId').html(html.join(''));

Other needed functions are hide() and show(), which are present in both frameworks. Which is better? Also I'm needing to enable/disable form controls, and to read/set their values.

Note that I know my updatable area's id (I don't need CSS selectors at this point). And I must tell that I'm saving these queried objects in some data structure for later use, so they are requested just once when the page is rendered, like this:

MyData = {div1:jQuery('#id1'), div2:$('id2'), ...};
...
div1.update('content 1');
div2.html('content 2');

So, which is the best practice?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery