一、 appendChild();方法,对于以下案例,会把div1中的剪切,然后复制到div2中,div1中将不存在ul列表
<head>
<style type="text/css">
#div1{width:200px;height: 200px;border:1px solid gray;}
#div2{width:200px;height: 200px;border:1px solid royalblue;}
</style>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li>刘亦菲</li>
<li>章子怡</li>
<li>林俊杰</li>
</ul>
</div>
<div id="div2">
</div>
<button value="添加" onclick="add1();">添加</button>
</body>
<script>
function add1(){
//得到div2
var div2=document.getElementById("div2");
//获取ul
var ul1=document.getElementById("ul1");
//把ul添加到div2中
div2.appendChild(ul1);
}
</script>
二、insertBefore(newNode,oldNode);在一个节点之前添加一个新的节点。注意:没有在一个节点之后添加节点的方法
<body>
<ul id="ul1">
<li id="li1">刘亦菲</li>
<li id="li2">章子怡</li>
<li id="li3">林俊杰</li>
</ul>
<button value="添加" onclick="add2();">在章子怡之前添加一个人</button>
</body>
<script>
function add2(){
//创建一个li标签
var li4=document.createElement("li");
//创建文本
var text1=document.createTextNode("唐嫣");
//把文本添加到标签下面
li4.appendChild(text1);
//获取ul,因为这些是属于ul的
var ul1=document.getElementById("ul1");
//把li4添加到li2之前 insertBefore(NewNode,OldNode)
ul1.insertBefore(li4,li2);
}
</script>
三、removeChild();通过要被删除的节点的父节点来执行该方法
<body>
<ul id="ul1">
<li id="li1">刘亦菲</li>
<li id="li2">章子怡</li>
<li id="li3">林俊杰</li>
</ul>
<button value="添加" onclick="remove1();">removechild林俊杰</button>
</body>
<script>
function remove1(){
//获取ul
var ul1=document.getElementById("ul1");
//获取要删除的li
var li3=document.getElementById("li3");
//执行remove
ul1.removeChild(li3);
}
</script>
四、replaceChild(newNode,oldNode);替换节点,必须通过父节点才能进行替换
<body>
<ul id="ul1">
<li id="li1">刘亦菲</li>
<li id="li2">章子怡</li>
<li id="li3">林俊杰</li>
</ul>
<button value="添加" onclick="replace1();">replaceChild林俊杰</button>
</body>
<script>
function replace1(){
//创建一个li标签
var li4=document.createElement("li");
//创建文本
var text1=document.createTextNode("唐嫣");
//把文本添加到标签下面
li4.appendChild(text1);
//获取ul,因为这些是属于ul的
var ul1=document.getElementById("ul1");
//获取林俊杰li
var li3=document.getElementById("li3");
//开始进行替换
ul1.replaceChild(li4,li3);
}
</script>
五、cloneNode(boolean);复制节点,里面为true或者false,true为复制,其操作的为副本,所以之前的列表仍然存在,和本文中第一个有区别
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{width:200px;height: 200px;border:1px solid gray;}
#div2{width:200px;height: 200px;border:1px solid royalblue;}
</style>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li>刘亦菲</li>
<li>章子怡</li>
<li>林俊杰</li>
</ul>
</div>
<div id="div2">
</div>
<button value="添加" onclick="add1();">添加</button>
</body>
<script>
function add1(){
//得到div2
//var div2=document.getElementById("div2");
//获取ul
var ul1=document.getElementById("ul1");
//执行复制方法
var copyul1=ul1.cloneNode(true);
//把copyul1添加到div2中
div2.appendChild(copyul1);
}
</script>