虚拟dom元素插入页面

创建虚拟dom元素插入页面

<div onclick="myFunction()"></div>

function myFunction(){
        // style属性一个个写入太麻烦，封装函数实现多个属性写入
	const setStylesOnElement = function(styles, element){
		Object.assign(element.style, styles);
	}
        // 创建虚拟节点
	var d=document.createDocumentFragment();
        // 创建元素
	var target = document.createElement('div')
	// 一个关闭按钮
        var closeicon = document.createElement('span')
	// 插入文字
        closeicon.innerHTML = 'X';
        // 给动态创建的元素添加样式
	setStylesOnElement({
		backgroundColor:'red',
		position: 'absolute',
		top: 0,
    	right: 0,
	},closeicon)
	setStylesOnElement({
		width:"100px",
		height:'100px',
		backgroundColor:'red',
		position: 'relative'
	},target)
	target.appendChild(closeicon)
	d.appendChild(target);
	document.body.appendChild(d);
	closeicon.onclick = ()=>{
		document.body.removeChild(target)
	}
};