Advanced Javascript: part 6

UTIL.DOM


The main goal of the DOM library is to provide convenience methods to create DOM elements.

To achieve default styling the library generates classNames out-of-the-box when no className is provided through the config constructor object. Also, all properties will be copied over to the html element.

So instead of writing code like this:

 var cell = document.createElement("td");
 cell.className = "td";  //default className is set to tagName
 cell.width = "100px";

you can write a one liner now:

 var cell = DOM.td({"width": "100px"});

Even simpler...

when you provide a string as constructor we assume it's innerHTML so

 var cell = document.createElement("td");
 cell.className = "td";  //default className is set to tagName
 cell.innerHTML = "cell value";

becomes

  var cell = DOM.td("cell value");