- removeChild方法：刪除節點
<body>
<ul id="ul1">
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">5</li>
<li id="li4">6</li>
</ul>
<input type="button" value="add" onclick="remove();"/>
<script type="text/javascript">
function remove(){
/*
1.獲取到li3的標籤
2.創建li
3.創建文本
4.把文本添加到li下面
5.獲取到ul
6.把li添加到ul下面
*/
var li3=document.getElementById("li3");
var ul1=document.getElementById("ul1");
ul1.removeChild(li3);
}
</script>
</body>- replaceChild(newNode,oldNode);替換節點
不能自己替換自己，通過父節點替換
兩個參數
第一個參數：新的節點
第二個參數：舊的節點
<body>
<ul id="ul1">
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">5</li>
<li id="li4">6</li>
</ul>
<input type="button" value="add" onclick="remove();"/>
<script type="text/javascript">
function remove(){
/*
1.獲取到li3的標籤
2.創建li
3.創建文本
4.把文本添加到li下面
5.獲取到ul
6.把li添加到ul下面
*/
var li3=document.getElementById("li3");
var ul1=document.getElementById("ul1");
var li5=document.createElement("li5");
var tex5=document.createTextNode("7");
li5.appendChild(tex5);
ul1.replaceChild(li5,li3);
}
</script>
</body>- cloneNode(boolean);複製節點
<body>
<ul id="ul1">
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">5</li>
<li id="li4">6</li>
</ul>
<div id="div1">
</div>
<input type="button" value="add" onclick="remove();"/>
<script type="text/javascript">
function remove(){
var ul1=document.getElementById("ul1");
var div1=document.getElementById("div1");
var ul2=ul1.cloneNode(true);
div1.appendChild(ul2);
}
</script>
</body>