Jared McAteer’s Blag - jaredmcateer.com

One of the things that really bugs me about Javascript is how all the easy stuff is typically the proprietary, non-standard method of programming. I’m big on standards for the web, but I’m a lazy programmer so when it comes to a choice between say, innerHTML and the proper DOM methods there is an inner struggle before my lazy side usually beats down my righteous standards crusader. Now I have much better method that appeals to both sides. The DOM Builder allows me to make standard compliant code while remaining simple to use. Follow the jump for a more detailed description of the problem and solution.

Technorati Tags: javascript, html, DOM, DOM Builder, standards

innerHTML is a non-standard method that allows you to put raw html inside a document very easily that works like:

document.getElementById(”someElement”).innerHTML = “<p id=”someOtherElement” style=’text-align:center’>Hello!</p>”;

Where to do the same using proper DOM Methods you would need to something to the effect:

var txtNode = document.createTextNode(”Hello!”);
var pNode = document.createElement(”p”);
pNode.setAttribute(”id”, “someOtherElement”);
pNode.setAttribute(”style”,”text-align:center;”);
pNode.addChild(txtNode);
document.getElementById(”someElement”).appendChild(pNode);

As you can see while cleaner and most logical, the DOM method is much more verbose and if you are doing a lot of additions it can get very long winded. This could lead to unreasonably hard to read and maintain code, what I’ve been looking for is a simple replacement to innerHTML that follow the DOM mehtod.

With the DOM Builder the above example can be done as such:

var html = DomBuilder.apply();
var pNode = html.P({id : ’someOtherElement’, style : ‘text-align:center;’}, “Hello!”);
document.getElementById(”someElement”).appendChild(pNode);

Not exactly the same as innerHTML, but definitly much leaner than DOM method. The benefits aren’t actually realised until you have to do a lot of additions. Here’s a little more complex example to illustrate what I mean:

var html = DomBuilder.apply();

var list = html.UL(
html.LI({id : ‘linksList’, ‘class’ : ‘listHeader’},
html.UL(
html.LI({id : ‘link1′}, A({title : “Click here to goto Digg”, href : “http://www.digg.com“}, “Digg.com”),
html.LI({id : ‘link2′}, A({title : “Click here to goto Reddit”, href : “http://www.reddit.com“}, “Reddit.com“)
)
),
html.LI({id : ‘metaList’, ‘class’ : ‘listHeader’},
html.UL(
html.LI({id : ‘meta1′}, A({title : “Log into the site”, href : “/login.php”}, “Login”),
html.LI({id : ‘meta2′}, A({title : “RSS Feed”, href : “/feed.rss”}, “RSS Feed”),
)
)
);

document.body.appendChild(list);

As you can see the DOM Builder allows you to build complex html with relative ease, it’s actually much cleaner than both methods and easy to learn. The learning curve is very small, it took me all of five minutes to figure it out, which without documentation can often be a pain.

It works like this:

var html = DomBuilder.apply(); <– initiates the DomBuilder

Then you use html can then be used to generate just about any element in HTML, html.INPUT, html.TITLE, etc.
Elements are initiated by the first arguement inside of curly brackets ({ }):

html.P({id : “someID1″, ‘class’ : “someClass”, onclick : ‘alert(”hellew!”)’},”Hello!”);

after the curly braces you can add text, or more elements, they can be nested indefinitly which is extremely handy.

Then when you’re finished you just append the html to somewhere in the document as you would in the regular DOM method. Of course you could also just impliment the code inline like this:

DomBuilder.apply(window);
document.getElementById(”someElement”).appendChild(
DIV({id : ’someOtherElement’, style : ‘color:red;text-weight:bold;’},”Hellew there!”)
);

That’s about it for now, I’m just scratching the surface here but I’m new.

Edit: sorry about that Wordpress was having some issues with the formatting, I think I got it though

Popularity: 38% [?]

This entry was posted on Wednesday, August 9th, 2006 at 9:13 am and is filed under javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.