html-expressions.js

const tagNames = ['html', 'head', 'title', 'base', 'link', 'meta', 'style', 'body', 'article', 'section', 'nav', 'aside', 'hgroup', 'header', 'footer', 'address', 'p', 'hr', 'pre', 'blockquote', 'ol', 'ul', 'menu', 'li', 'dl', 'dt', 'dd', 'figure', 'figcaption', 'main', 'div', 'a', 'em', 'strong', 'small', 's', 'cite', 'q', 'dfn', 'abbr', 'ruby', 'rt', 'rp', 'data', 'time', 'code', 'var', 'samp', 'kbd', 'i', 'b', 'u', 'mark', 'bdi', 'bdo', 'span', 'br', 'wbr', 'ins', 'del', 'picture', 'source', 'img', 'iframe', 'embed', 'object', 'param', 'video', 'audio', 'track', 'map', 'area', 'table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th', 'form', 'label', 'input', 'button', 'select', 'datalist', 'optgroup', 'option', 'textarea', 'output', 'progress', 'meter', 'fieldset', 'legend', 'details', 'summary', 'dialog', 'script', 'noscript', 'template', 'slot', 'canvas', 'hr', 'button', 'marquee', 'meter', 'progress', 'select', 'textarea', 'marquee']

tagNames.forEach(tagName =>
  window[tagName] = function(attributes={}, content=[]) {
    const node = document.createElement(tagName)
    for (let attr in attributes) {
      node.setAttribute(attr, attributes[attr])
    }
    populate(node, content)
    return node
  }
)

function process([tagName='div', attributes={}, content=['']]=[]) {
  const builtin = typeof tagName === 'function' ? tagName : window[tagName]
  return builtin(attributes, content)
}

function populate(node, content=[]) {
  if (content.constructor.name === 'String') {
    node.textContent += content
  }
  if (Array.isArray(content)) {
    content.forEach(piece =>
      Array.isArray(piece)
      ? node.appendChild(process(piece))
      : node.textContent += piece
    )
  }
}

function renderDOM(tree) {
  return process(tree)
}

function renderHTML(tree) {
  return renderDOM(tree).outerHTML
}

function renderXML(tree) {
  return new XMLSerializer().serializeToString(
    renderDOM(tree)
  )
}

// DOM
console.group('Output as DOM')
console.log(
  renderDOM(
    [html ,, [
      [head ,, [
        [title ,, 'Demo HTML Page']
      ]]
    ]]
  )
)
console.groupEnd()

// HTML
console.group('Output as HTML')
console.log(
  renderHTML(
    [html ,, [
      [head ,, [
        [title ,, 'Demo HTML Page']
      ]]
    ]]
  )
)
console.groupEnd()

// XML
console.group('Output as XML')
console.log(
  renderXML(
    [html ,, [
      [head ,, [
        [title ,, 'Demo HTML Page']
      ]]
    ]]
  )
)
console.groupEnd()

// JSON
console.group('Parse from JSON')
console.log(
  renderDOM(
    JSON.parse(`
      ["html", {}, [
      ["head", {}, [
        ["title", {}, "Demo HTML Page"]
      ]]
    ]]
    `)
  )
)
console.groupEnd()