dom节点的创建插入删除更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
	</body>
	
	<script>
		//创建节点
		//创建新元素
		var ul = document.createElement('ul')
		//向新创建的元素中添加内容
		ul.innerHTML = '<li>我是列表项1</li>'
		//将新元素添加到页面中，要在父元素上调用
		document.body.appendChild(ul)
		
		//在创建一个列表项
		var li1 = document.createElement('li')
		li1.innerHTML = '我是列表项2'
		ul.appendChild(li1)   //默认插入父节点的尾部
		
		var li2 = document.createElement('li');
		li2.innerHTML='<span style="color: red;">我是列表项3</span>'
		//insertBefore('新节点','插入的位置')
		ul.insertBefore(li2,li1);
		
		var li3 = document.createElement('li');
		li3.innerHTML='<span style="color: yellow;">我是列表项4</span>'
		//等效于ul.appendChilde(li3)   插入位置为空时或在末尾插入
		ul.insertBefore(li3,null);
		
		//删除节点
		ul.removeChild(li3)
		
		//替换节点
		var li4 = document.createElement('li')
		li4.innerHTML = '<span style="color: blue">我要把别人替换掉</span>'
		//replaceChild('替换成的元素','被替换的元素')
		ul.replaceChild(li4,li2)
	</script>
</html>
相关文章
