SOURCE

console 命令行工具 X clear

                    
>
console
const vnode = {
    tag: 'div',
    props: {},
    children: [
        {
            tag: 'button',
            props: {
                onClick: ()=>alert('hello world'),
            },
            children: '点击'
        }
    ]
}

function render(vnode, container){
    const el = document.createElement(vnode.tag)
    for(const key in vnode.props){
        if(/^on/.test(key)){
            el.addEventListener(
                key.substring(2).toLowerCase(),
                vnode.props[key]
            )
        }else{
            el[key] = vnode.props[key]
        }
    }
    if(typeof vnode.children === 'string'){
        el.appendChild(document.createTextNode(vnode.children))
    }else if(typeof Array.isArray(vnode.children)){
        for(const child of vnode.children){
            render(child, el)
        }
    }
    container.appendChild(el)
}

const app = document.getElementById('app')

render(vnode, app)
<div id="app"></div>