David Wells

Full Stack Developer

Focused on UX/UI, Growth
& Product Development

Generate DOM Fragments with JavaScript

Published on Edit this post

XT.js is a crazy small script to generate DOM fragments

// XT.js source
(function(d) {
  function nodeRender (tplArr, parent, k, o) {
    for (;(o=tplArr.shift())!=null;) {
      if (''+o === o || +o === o) // scalar
        parent.appendChild(d.createTextNode(o))
      else if (''+o === '[object Object]') // object
        for (k in o) parent.setAttribute(k, o[k])
      else { // array
        nodeRender(o, k = d.createElement(o.shift()))
        parent.appendChild(k)
      }
    }
  }
  // assign function to window
  window.XT = function (tplArr, docFrag) {
    nodeRender(tplArr.slice(), docFrag = d.createDocumentFragment())
    return docFrag
  }
})(document)

Usage:

var div = XT([
    ['div', {'data-attr1': 23},
        ['a', {href: 'http://example.com'}, 'Example text',
            ['span', ' (additional span)']
        ]
    ]
])
// append div to body
document.body.appendChild(div);

Very cool script when you need some DOM nodes on the fly