A #javaScript #function : Create HTML element inspired by #Bonzo

readme.md

This function is an extract from the Bonzo project that helps you to create HTML node.

bonzo_create.js

bonzo_create = function (node) {
    return typeof node == 'string' && node !== '' ?
      function () {

        // Add context values
        var win = window
          , doc = win.document
          , html = doc.documentElement
          , parentNode = 'parentNode'
          , query = null
          , specialAttributes = /^(checked|value|selected)$/i
          , specialTags = /^(select|fieldset|table|tbody|tfoot|td|tr|colgroup)$/i // tags that we have trouble inserting *into*
          , table = [ '<table>', '</table>', 1 ]
          , td = [ '<table><tbody><tr>', '</tr></tbody></table>', 3 ]
          , option = [ '<select>', '</select>', 1 ]
          , noscope = [ '_', '', 0, 1 ]
          , tagMap = { // tags that we have trouble *inserting*
                thead: table, tbody: table, tfoot: table, colgroup: table, caption: table
              , tr: [ '<table><tbody>', '</tbody></table>', 2 ]
              , th: td , td: td
              , col: [ '<table><colgroup>', '</colgroup></table>', 2 ]
              , fieldset: [ '<form>', '</form>', 1 ]
              , legend: [ '<form><fieldset>', '</fieldset></form>', 2 ]
              , option: option, optgroup: option
              , script: noscope, style: noscope, link: noscope, param: noscope, base: noscope
            }
          , stateAttributes = /^(checked|selected)$/
          , ie = /msie/i.test(navigator.userAgent)
          , hasClass, addClass, removeClass
          , uidMap = {}
          , uuids = 0
          , digit = /^-?[\d\.]+$/
          , dattr = /^data-(.+)$/
          , px = 'px'
          , setAttribute = 'setAttribute'
          , getAttribute = 'getAttribute'
          , byTag = 'getElementsByTagName'
          , features = function() {
              var e = doc.createElement('p')
              e.innerHTML = '<a href="#x">x</a><table style="float:left;"></table>'
              return {
                hrefExtended: e[byTag]('a')[0][getAttribute]('href') != '#x' // IE < 8
              , autoTbody: e[byTag]('tbody').length !== 0 // IE < 8
              , computedStyle: doc.defaultView && doc.defaultView.getComputedStyle
              , cssFloat: e[byTag]('table')[0].style.styleFloat ? 'styleFloat' : 'cssFloat'
              , transform: function () {
                  var props = ['webkitTransform', 'MozTransform', 'OTransform', 'msTransform', 'Transform'], i
                  for (i = 0; i < props.length; i++) {
                    if (props[i] in e.style) return props[i]
                  }
                }()
              , classList: 'classList' in e
              }
            }()
          , trimReplace = /(^\s*|\s*$)/g
          , whitespaceRegex = /\s+/
          , toString = String.prototype.toString
          , unitless = { lineHeight: 1, zoom: 1, zIndex: 1, opacity: 1 }
          , trim = String.prototype.trim ?
              function (s) {
                return s.trim()
              } :
              function (s) {
                return s.replace(trimReplace, '')
              }


        // Add each method
        function each(ar, fn, scope) {
          for (var i = 0, l = ar.length; i < l; i++) fn.call(scope || ar[i], ar[i], i, ar)
          return ar
        }

        var tag = /^\s*<([^\s>]+)/.exec(node)
           , el = document.createElement('div')
          , els = []
          , p = tag ? tagMap[tag[1].toLowerCase()] : null
          , dep = p ? p[2] + 1 : 1
          , ns = p && p[3]
          , pn = parentNode
          , tb = features.autoTbody && p && p[0] == '<table>' && !(/<tbody/i).test(node)

        el.innerHTML = p ? (p[0] + node + p[1]) : node
        while (dep--) el = el.firstChild
        // for IE NoScope, we may insert cruft at the begining just to get it to work
        if (ns && el && el.nodeType !== 1) el = el.nextSibling
        do {
          // tbody special case for IE<8, creates tbody on any empty table
          // we don't want it if we're just after a <thead>, <caption>, etc.
          if ((!tag || el.nodeType == 1) && (!tb || el.tagName.toLowerCase() != 'tbody')) {
            els.push(el)
          }
        } while (el = el.nextSibling)
        // IE < 9 gives us a parentNode which messes up insert() check for cloning
        // `dep` > 1 can also cause problems with the insert() check (must do this last)
        each(els, function(el) { el[pn] && el[pn].removeChild(el) })
        return els

      }() : isNode(node) ? [node.cloneNode(true)] : []
  }

bonzo_create.min.js

bonzo_create=function(node){return typeof node=='string'&&node!==''?function(){var win=window,doc=win.document,html=doc.documentElement,parentNode='parentNode',query=null,specialAttributes=/^(checked|value|selected)$/i,specialTags=/^(select|fieldset|table|tbody|tfoot|td|tr|colgroup)$/i,table=['<table>','</table>',1],td=['<table><tbody><tr>','</tr></tbody></table>',3],option=['<select>','</select>',1],noscope=['_','',0,1],tagMap={thead:table,tbody:table,tfoot:table,colgroup:table,caption:table,tr:['<table><tbody>','</tbody></table>',2],th:td,td:td,col:['<table><colgroup>','</colgroup></table>',2],fieldset:['<form>','</form>',1],legend:['<form><fieldset>','</fieldset></form>',2],option:option,optgroup:option,script:noscope,style:noscope,link:noscope,param:noscope,base:noscope},stateAttributes=/^(checked|selected)$/,ie=/msie/i.test(navigator.userAgent),hasClass,addClass,removeClass,uidMap={},uuids=0,digit=/^-?[\d\.]+$/,dattr=/^data-(.+)$/,px='px',setAttribute='setAttribute',getAttribute='getAttribute',byTag='getElementsByTagName',features=function(){var e=doc.createElement('p')e.innerHTML='<a href="#x">x</a><table style="float:left;"></table>'return{hrefExtended:e[byTag]('a')[0][getAttribute]('href')!='#x',autoTbody:e[byTag]('tbody').length!==0,computedStyle:doc.defaultView&&doc.defaultView.getComputedStyle,cssFloat:e[byTag]('table')[0].style.styleFloat?'styleFloat':'cssFloat',transform:function(){var props=['webkitTransform','MozTransform','OTransform','msTransform','Transform'],i for(i=0;i<props.length;i++){if(props[i]in e.style)return props[i]}}(),classList:'classList'in e}}(),trimReplace=/(^\s*|\s*$)/g,whitespaceRegex=/\s+/,toString=String.prototype.toString,unitless={lineHeight:1,zoom:1,zIndex:1,opacity:1},trim=String.prototype.trim?function(s){return s.trim()}:function(s){return s.replace(trimReplace,'')}function each(ar,fn,scope){for(var i=0,l=ar.length;i<l;i++)fn.call(scope||ar[i],ar[i],i,ar)return ar}var tag=/^\s*<([^\s>]+)/.exec(node),el=document.createElement('div'),els=[],p=tag?tagMap[tag[1].toLowerCase()]:null,dep=p?p[2]+1:1,ns=p&&p[3],pn=parentNode,tb=features.autoTbody&&p&&p[0]=='<table>'&&!(/<tbody/i).test(node)el.innerHTML=p?(p[0]+node+p[1]):node while(dep--)el=el.firstChild if(ns&&el&&el.nodeType!==1)el=el.nextSibling do{if((!tag||el.nodeType==1)&&(!tb||el.tagName.toLowerCase()!='tbody')){els.push(el)}}while(el=el.nextSibling)each(els,function(el){el[pn]&&el[pn].removeChild(el)})return els}():isNode(node)?[node.cloneNode(true)]:[]}