I don't know if anyone has ever come across this shortcut for creating HTML elements in real time using document.createElement...

Normally one would use

var myDiv = document.createElement("div")

But i've found a faster way using the cloneNode(deep) method, which is about 40% faster. So I created the function below and use it to create Elements...to further speed up things, I created templates on page load of HTML elements to be cloned.

var DOM = new Object()
DOM.div = DOC.createElement("div")
DOM.span = DOC.createElement("span")
DOM.img = DOC.createElement("img")
DOM.table = DOC.createElement("table")
DOM.tbody = DOC.createElement("tbody")
DOM.tr = DOC.createElement("tr")
DOM.td = DOC.createElement("td")
DOM.input = DOC.createElement("input")
DOM.select = DOC.createElement("select")
DOM.option = DOC.createElement("option")

DOM.create = function DOM_CREATE(tag, parent) {
var template = (typeof tag == "string") ? DOM[tag.toLowerCase()] : tag
var elm = (template) ? template.cloneNode(true) : DOC.createElement(tag)

if (parent) parent.appendChild(elm)
return elm
}

Now, to create a DIV, I use the following code:

var myDiv = DOM.create("div")

The function checks to see if a template can be cloned, then clones it. Also an object can be cloned by sending it as the first argument, instead of "div".

I tried it out in IE5 and NS6, and Mozilla 0.9.1. Works great! Definitely faster. I timed generation of 1000 elements and the percentage of speed increase was about 40-50%. Any other results would be welcomed!

Regards,

Micah