收藏
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
