domgen – Creating HTML with Javascript without DOM API

Jussi Toivola — Thu, 02 Sep 2010 12:43:41 +0000

Tired of using Javascript DOM API for generating HTML dynamically? Meet domgen. domgen is a tool for easy dynamic content generation via Javascript. It generates DOM elements from dictionary specification similar to HTML and eliminates the need for cumbersome DOM Javascript API.

domgen uses a simple specification to generate the HTML. In some cases it’s more reliable to use DOM API to generate HTML instead of using innerHTML. We have had problems especially with iPhone when using innerHTML.
See for example http://pastebin.com/LLk3J0iH or google “iPhone innerHTML” for more info. In fact, innerHTML is not even part of the HTML standard even though it exists on every browser.

So if you want to add dynamic HTML properly, you should use the Javascript DOM API. Consider the following short HTML where the contents inside body had to be generated:


    my div

Using Javascript DOM API:

// Get the body tag
var body = document.getElementsByTagName("body")[0];
// Create 'div' element
var mydiv = document.createElement("div");
mydiv.setAttribute("id", "mydiv");
mydiv.innerText = "my div";
// Attach the div to body
body.appendChild(mydiv);

And using domgen:

var spec = [
    'div',
    {
        id : 'mydiv',
        _innerText : 'my div'
    }
];
domgen.generate( domgen.get("body")[0], spec);
// or with jQuery
domgen.generate( $("body")[0], spec);

To me, domgen seems a lot easier to read and work with. Get code and more examples here: https://bitbucket.org/mfabrik/domgen

Creating a drag’n'drop basket with jQueryUI

Mikko Ohtamaa — Tue, 05 Jan 2010 12:53:07 +0000

I have created an example how to create a “basked” with jQuery and jQueryUI with the following features

The user can be pick items from the predefined set
Items are dragged and dropped to the basket
The basket value reflects a hidden input

This kind of user interface pattern is suitable for

Shopping carts
Travel planners

The example in fact bears the name “travel planner” but it is not tied to travel anyhow.

Note: this is just a screenshot - please see live example

The example code uses

google.code() content delivery network to load jQuery and jQueryUI
jQueryUI draggable and droppable features
Well planned visual cues for the drag and drop operations: cursor changes, CSS hover classes
which value is updated according to the basket content – all selected item ids form a comma separated list

The example code is well-documented with links to the further documentation.

mFabrik - web and mobile development » jquery

domgen – Creating HTML with Javascript without DOM API

Creating a drag’n'drop basket with jQueryUI