Create element function that makes the best of jquery and javascript. Will convert to jquery plugin and test speed there as well. You can check results of speed tests here: http://jsperf.com/building-dom-items/2. Plan is to make this function the method to use when creating elements so that it is always the fastest and most browser compatible me…

CreateElement

 /*
            Sample object that should work is:
 var exampleObj = {
     tag: 'div',
     attr: {
         id: '1234',
         href: 'some/url/path',
         class: ['createdElement', 'example', 'parent'],
         text: 'some text'
     },
     children: [{
         tag: 'div',
         attr: {
             id: 'abc',
             href: 'some/url/path',
             class: ['createdElement', 'example', 'child'],
             text: 'some text'
         }
     }, {
         tag: 'div',
         attr: {
             id: 'abc',
             href: 'some/url/path',
             class: ['createdElement', 'example', 'child'],
             text: 'some text'
         }
     }]
 }
 //*/
 var createElement = function (elementObj) {
     var newElement;

     try {
         if (typeof elementObj.tag !== 'string') {
             throw {
                 name: 'CreateElement tag type error',
                 message: 'You must pass in a value for the tag property.'
             };
         }
         newElement = document.createElement(elementObj.tag);

         elementObj.children = (typeof elementObj.children === 'undefined') ? [] : elementObj.children;
         for (var i = 0; i < elementObj.children.length; i++) {
             newElement.appendChild(this.createElement(elementObj.children[i]));
         }

         for (var attr in elementObj.attr) {
             if (attr === 'text') {
                 var txtToAdd = document.createTextNode(elementObj.attr.text);
                 newElement.appendChild(txtToAdd);
             } else if (attr === 'class') {
                 if (elementObj.attr.class.length > 1 && typeof newElement.classList === 'undefined') {
                     newElement.classList = {
                         add: function (className) {
                             $(newElement).addClass(className);
                         }
                     }
                 }
                 elementObj.attr.class = (typeof elementObj.attr.class === 'undefined') ? [''] : elementObj.attr.class;
                 if (typeof elementObj.attr.class !== 'object' && typeof elementObj.attr.class.length !== 'number') {
                     throw {
                         name: 'CreateElement class error',
                         message: 'You must pass the class property as an array.'
                     };
                 }
                 newElement.className = elementObj.attr.class[0];
                 for (var i = 1; i < elementObj.attr.class.length; i++) {
                     newElement.classList.add(elementObj.attr.class[i]);
                 }
             } else {
                 newElement[attr] = elementObj.attr[attr];
             }
         }
     } catch (err) {
         console.log(err.message);
     }
     return newElement;
 }

Need to check for browser compatibility issues. but it's tested and working in Chrome Version 25.0.1364.152 m (OS: W7 Home Premium SP1 64bit)

http://jsperf.com/jquery-and-native-addclass-differences/2 shows why I add classes the way I do

Update function to allow for {div #idName .class1,class2 :span #spanID .spanClass1,spanClass2 #spanChildP} format.

Maybe {div #idName .class1,class2 :{span #spanID .spanClass1,spanClass2 :{p #spanChildP}}}

Just use Zen coding format.