实现根据虚拟dom生成dom节点的方法

console.log('s')

{/* <ul>
  0
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul> */}

let vdom = {
  el: '',
  tag: 'ul',
  content: 0,
  attribute: {},
  props: {},
  children: [
    {
      el: '',
      tag: '',
      content: 0,
      isTextNode: true,
    },
    {
      el: '',
      tag: 'li',
      content: '',
      children: [
        {
          el: '',
          tag: 'li',
          content: 1,
          isTextNode: true,
        },
        {
          el: '',
          tag: 'div',
          content: 'hhhh'
        },
        {
          el: '',
          tag: 'div',
          content: 'qqqq',
          isTextNode: true
        }
      ]
    },
    {
      el: '',
      tag: 'li',
      content: 2
    },
    {
      el: '',
      tag: 'li',
      content: 3
    },
  ],
  parents: []
}

function transformVdomToElement(data) {
  let { ele, children, tag } = data
  ele = document.createElement(tag)
  for(let i = 0; i < children.length; i++) {
    let child = children[i]
    let cEle
    if(child.isTextNode) {
      cEle = document.createTextNode(child.content)
    } else {
      // console.log(child)
      if(child.children && child.children.length > 0) {
        cEle = transformVdomToElement(child)
        // console.log(cEle)
      } else {
        cEle = document.createElement(child.tag)
        cEle.innerHTML = child.content
      }
    }
    ele.appendChild(cEle)
  }
  console.log(ele)
  return ele
}

let div = transformVdomToElement(vdom)
document.querySelector('.main').appendChild(div)