Function to make creating DOM elements with jQuery easier and more readable

jQuery-create-elements-v2.js

// v2: more similar to render functions used by React, Vue, etc

// Example usage:
create('div', [
  ['h1', { 'class': 'foo' }, 'Bar'],
  ['p', 'Lorem ipsum dolor']
])
// OR
create('div', [
  create('h1', { 'class': 'foo' }, 'Bar'),
  create('p', 'Lorem ipsum dolor')
])

/**
 * See [jQuery docs](http://api.jquery.com/jquery/#jQuery-html-attributes) for attribute options
 * Root params can be put in an array or just passed as an argument list:
 *   e.g: create(['div', 'text']) or create('div', 'text')
 *
 * @param params ['tag-name', <optional plain attributes object>, <text content or child element params>...]
 * @return root element
 */
function create (params) {
  if (!$.isArray(params)) {
    return create.call(this, Array.prototype.slice.call(arguments));
  }

  var name = params[0]

  var hasAttributes = typeof params[1] === "object" && params[1] !== null && !$.isArray(params[1])
  var attributes = hasAttributes ? params[1] : {}
  var children = hasAttributes ? params[2] : params[1]

  var el = $('<' + name + '>', attributes)
  
  // If string passed just set text content
  if (typeof children === 'string') {
    el.text(children)
    return el
  }
  
  // Otherwise loop through array
  for (var i = 0; i < children.length; i++) {
    if (children[i].jquery) {
      el.append(children[i])
    } else if ($.isArray(children[i])) {
      el.append(create(children[i]))
    } else {
      el.append(document.createTextNode(children[i]))
    }
  }
  
  return el
}

jQuery-create-elements.js

// Example usage:
create('div', ['h1', { 'class': 'foo' }, 'Bar'], ['p', 'Lorem ipsum dolor'])

/**
 * See [jQuery docs](http://api.jquery.com/jquery/#jQuery-html-attributes) for attribute options
 * Root params can be put in an array or just passed as an argument list:
 *   e.g: create(['div', 'text']) or create('div', 'text')
 *
 * @param params ['tag-name', <optional plain attributes object>, <text content or child element params>...]
 * @return root element
 */
function create (params) {
  if (!$.isArray(params)) {
    return create.call(this, Array.prototype.slice.call(arguments));
  }

  var name = params[0]

  var hasAttributes = typeof params[1] === "object" && params[1] !== null && !$.isArray(params[1])
  var attributes = hasAttributes ? params[1] : {}
  var start = hasAttributes ? 2 : 1

  var el = $('<' + name + '>', attributes)

  for (var i = start; i < params.length; i++) {
    if ($.isArray(params[i])) {
      el.append(create(params[i]))
    } else {
      el.text(params[i])
    }
  }

  return el
}