createElement.js

function clientRender () {
  let root = document.body

  function createElement (name, attrs, children) {
    let element = document.createElement(name)

    Object.keys(attrs).forEach((attrName) => {
      element.setAttribute(attrName, attrs[attrName])
    })

    children.forEach((contentItem) => {
      element.appendChild(contentItem)
    })

    return element
  }

  let title = createElement('h1', {}, [document.createTextNode('Client Page')])
  let component = createElement('div', { class: 'component' }, [
    createElement('ul', {}, [
      createElement('li', {}, [document.createTextNode('one')]),
      createElement('li', {}, [document.createTextNode('two')]),
      createElement('li', {}, [document.createTextNode('three')])
    ])
  ])

  let rootContent = [title, component]

  rootContent.forEach((childNode) => {
    root.appendChild(childNode)
  })
}

clientRender()