a JS shim to quickly create DOM elements using document.createElement

nCreateElement.js

/* nCreateElement
 * ----------------------------------------------------------------------------
 * a JS shim to quickly create DOM elements using document.createElement
 *
 * url     : https://gist.github.com/imthenachoman/4a72ff3f51133ab7eae3
 * author  : Anchal Nigam
 * e-mail  : [email protected]
 *
 * Copyright (c) 2015 Anchal Nigam ([email protected])
 * Licensed under the MIT license: http://opensource.org/licenses/MIT
 * ----------------------------------------------------------------------------
 *
 * attributes:
 *     tagName       required    string    the name of the element to create (e.g. div, a, input, etc...)
 *     appendType    optional    string    appendFirst|appendBefore|appendAfter|appendEnd|replace
 *     appendTo      optional    string    the HTML element for the appendType reference
 *     properties    optional    hash      an object hash of properties and values
 * 
 * return: the newly created element
 */
function createElement(tagName, appendType, appendTo, properties)
{
    // create the element
    var element = document.createElement(tagName);
    
    // if we have any properties to set
    if(properties)
    {
        // iterate through each property
        for(property in properties)
        {
            // match innerText, innerHTML or event attributes
            if(/^(inner|on)\w+$/i.test(property)) element[property] = properties[property];
            // else just set the attribute
            else element.setAttribute(property, properties[property]); 
        }
    }
    
    switch(appendType.toLowerCase())
    {
        case "appendfirst":
            // insert it before the first child
            appendTo.insertBefore(element, appendTo.firstChild);
            break;
        case "appendbefore":
            // find the parent and insert before
            appendTo.parentNode.insertBefore(element, appendTo);
            break;
        case "appendafter":
            // find the parent and insert before the next sibling
            appendTo.parentNode.insertBefore(element, appendTo.nextElementSibling || appendTo.nextSibling);
            break;
        case "appendend":
            // appned to the end
            appendTo.appendChild(element);
            break;
        case "replace":
            // find the parent and replace the node
            appendTo.parentNode.replaceChild(element, appendTo);
            break;
    }
    return element;
}

nCreateElement.min.js

/* nCreateElement | https://gist.github.com/imthenachoman/4a72ff3f51133ab7eae3 | Copyright (c) 2015 Anchal Nigam ([email protected]) | MIT license (http://opensource.org/licenses/mit) */
function createElement(tagName,appendType,appendTo,properties){var element=document.createElement(tagName);if(properties){for(property in properties){if(/^(inner|on)\w+$/i.test(property))element[property]=properties[property];else element.setAttribute(property,properties[property])}}switch(appendType.toLowerCase()){case"appendfirst":appendTo.insertBefore(element,appendTo.firstChild);break;case"appendbefore":appendTo.parentNode.insertBefore(element,appendTo);break;case"appendafter":appendTo.parentNode.insertBefore(element,appendTo.nextElementSibling||appendTo.nextSibling);break;case"appendend":appendTo.appendChild(element);break;case"replace":appendTo.parentNode.replaceChild(element,appendTo);break}return element}

usage.js

// examples:
var e = createElement("div", "appendFirst", element_to_add_new_element_to_start_of);
var e = createElement("div", "appendEnd", element_to_append_new_element_to_end_of);
var e = createElement("div", "appendBefore", element_to_add_new_element_before_of);
var e = createElement("div", "appendAfter", element_to_add_new_element_after);
var e = createElement("div", "replace", element_to_replace_with_new_element);
var e = createElement("div", null, null, {"innerText" : "test"});
var e = createElement("div", null, null, {"innerHTML" : "<b>test</b>"});
var e = createElement("div", null, null, {"onclick" : "doIt()"});
var e = createElement("div", null, null, {"id" : "someID"});
var e = createElement("div", null, null, {"class" : "someClass anotherClass"});
var e = createElement("input", null, null, {"name" : "inputName", "title" : "inputTitle"});