【刪除節點】
步驟：
① 找到對象
② 找到他的父對象 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>