- 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>