<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
