【删除节点】
步骤：
① 找到对象
② 找到他的父对象 parentObj
③ parentObj.removeChild(子对象);
【例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 300px;
height: 300px;
background: blue;
border-bottom: 1px solid black;
}
</style>
<script>
function del(){
var lis = document.getElementsByTagName("li");
var lastLi = lis[lis.length-1];
lastLi.parentNode.removeChild(lastLi);
}
</script>
</head>
<body>
<input type="button" value="删除最后一个li" onclick="del();">
<ul>
<li>白羊</li>
<li>金牛</li>
<li>双子</li>
<li>巨蟹</li>
</ul>
</body>
</html>
【创建节点】
步骤：
① 创建对象
② 找到父对象 parentObj
③ parentObj.addChild(对象);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 300px;
height: 300px;
background: blue;
border-bottom: 1px solid black;
}
</style>
<script>
function add(){
//创建li
var li = document.createElement("li");
//创建文本节点
var txt = document.createTextNode("海魔女");
//插入文本节点到li
li.appendChild(txt);
//把li插入ul
document.getElementsByTagName("ul")[0].appendChild(li);
}
</script>
</head>
<body>
<input type="button" value="追加一个li" onclick="add();">
<ul>
<li>白羊</li>
<li>金牛</li>
<li>双子</li>
<li>巨蟹</li>
</ul>
</body>
</html>
时间： 2024-12-24 12:01:58