function renderApp(selector, children) {
  const app = document.querySelector(selector)
  appendChildren(app, children)
}

function domElements() {
  const elements =
    ['div', 'ul', 'li', 'p', 'h1', 'img']

  return elements.reduce((els, el) => {
    els[el] = createElement.bind(null, el)
    return els
  }, {})
}

function createElement(type, options, children) {
  if (
    arguments.length === 2 &&
    (Array.isArray(options) || typeof options === 'string')
  ) return createElement(type, {}, options)

  const el = applyProps(document.createElement(type), options)

  if (typeof children === 'string') {
    appendText(el, children)
  } else if (Array.isArray(children)) {
    appendChildren(el, children)
  }

  return el
}

function applyProps(el, props) {
  Object.keys(props)
    .filter(prop => prop in el)
    .forEach(prop => el[prop] = props[prop])

  return el
}

function appendChildren(parent, children) {
  const fragment = document.createDocumentFragment()
  children.forEach(child => fragment.appendChild(child))
  parent.appendChild(fragment)
  return parent
}

function appendText(el, text) {
  const textNode = document.createTextNode(text)
  el.appendChild(textNode)
}