目录
1、添加节点
- appendChild()：添加子节点到末尾（类似于粘贴复制的效果）
步骤：
- 获取到ul
- 获取到div2
- 把ul添加到div2
2、插入节点
- insertBefore(newNode，oldNode)：在某个节点之前插入一个新的节点
步骤：
- 获取到li3标签
- 创建li
- 创建文本
- 把文本添加到li下面
- 获取到ul
- 把li添加到ul下面
3、删除节点
- removeChild()
步骤：
- 获取到li标签
- 执行父节点Ul标签
- 执行删除
4、替换节点
- replaceChild(newNode，oldNode)
步骤：
- 获取到li标签
- 创建标签li
- 创建文本
- 把文本添加到li下面
- 获取父节点Ul标签
- 执行替换
5、复制节点
- cloneNode(boolean)
步骤：
- 获取到ul
- 执行复制方法：cloneNode(true)
- 把复制后的内容放到div2中
- 获取div2
- appendChild方法
<html>
<head>
<title>oneStar</title>
<style type="text/css">
div#div1{
width:360px;
height:150px;
border:2px solid red;
}
div#div2{
width:360px;
height:150px;
border:2px solid black;
}
</style>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li id="li1">oneStar</li>
<li id="li2">twoStar</li>
<li id="li3">threeStar</li>
<li id="li4">fourStar</li>
</ul>
</div>
<div id="div2">
</div>
<input type="button" value="添加节点" onclick="Append();"/>
<input type="button" value="插入节点" onclick="Insert();"/>
<input type="button" value="删除节点" onclick="Delete();"/>
<input type="button" value="替换节点" onclick="Replace();"/>
<input type="button" value="复制节点" onclick="Clone();"/>
</body>
<script type="text/javascript">
//添加节点
function Append(){
/*
1.获取到ul
2.获取到div2
3.把ul添加到div2
*/
var Ul = document.getElementById("ul1");
var Div = document.getElementById("div2");
Div.appendChild(Ul);
}
//插入节点
function Insert(){
/*
1.获取到li3标签
2.创建li
3.创建文本
4.把文本添加到li下面
5.获取到ul
6.把li添加到ul下面
*/
var Li3 = document.getElementById("li3");
var Li = document.createElement("li");
var text = document.createTextNode("派大星");
Li.appendChild(text);
var Ul = document.getElementById("ul1");
Ul.insertBefore(Li,Li3);
}
//删除节点
function Delete(){
/*
1.获取到li标签
2.执行父节点Ul标签
3.执行删除
*/
var Li3 = document.getElementById("li3");
var Ul = document.getElementById("ul1");
Ul.removeChild(Li3);
}
//替换节点
function Replace(){
/*
1.获取到li标签
2.创建标签li
3.创建文本
4.把文本添加到li下面
5.获取父节点Ul标签
6.执行替换
*/
var Li3 = document.getElementById("li3");
var Li = document.createElement("li");
var text = document.createTextNode("海绵宝宝");
Li.appendChild(text);
var Ul = document.getElementById("ul1");
Ul.replaceChild(Li,Li3);
}
//复制节点(把ul列表复制到另一个div里面)
function Clone(){
/*
1.获取到ul
2.执行复制方法：cloneNode(true)
3.把复制后的内容放到div2中
获取div2
appendChild方法
*/
var Ul = document.getElementById("ul1");
var Ulclone = Ul.cloneNode(true);
var Div = document.getElementById("div2");
Div.appendChild(Ulclone);
}
</script>
</html>
