Better support for dynamically creating/update DOM elements

Better support for dynamically creating/update DOM elements

I've created a rich data communications library in JavaScript for my company. It models our Java based Component API as a remote API in JavaScript. This is great because I'm able to write sophisticated web applications just out of JavaScript, HTML and CSS. Just about everything can be written in the client. With faster JavaScript support for the client, this seems to be the current trend of web development. In particular, this approach works well when developing a truly open web app for a Smart Phone or Smart Pad.

I've tried to take this approach with jQuery mobile with mixed results. jQuery mobile seems to work fine if you predefine your DOM content statically in HTML. From what I can see, jQuery mobile then modifies the DOM to give the correct mobile content look at feel. This is a bit of a nightmare if you then wish to dynamically add, edit or delete DOM content. There also seems to be a lack of a 'refresh' method for when certain DOM elements have changed etc (although there are some hacks to workaround this as I've discovered).

I imagine the best way to tackle this problem is to provide some jQuery based JavaScript Object wrappers that abstract the real structure of the DOM away from the developer. One could then easily dynamically manipulate the jQuery mobile DOM elements without really being concerned about their internal structure. I realize jQuery already does this but I'm thinking about some higher level wrappers for each type of jQuery mobile 'widget' that's available. For instance, the list view would have its own wrapper that would easily enable rows to be added, deleted or updated.