1.单点替换程序
这种效果可以看出，虽然被替换了，但是下面节点也没移动了。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var bjNode=document.getElementById("bj"); 9 var rlNode=document.getElementById("rl"); 10 var cityNode=document.getElementById("city"); 11 alert(1); 12 cityNode.replaceChild(rlNode,bjNode); 13 } 14 </script> 15 </head> 16 <body> 17 <p>你喜欢哪个城市?</p> 18 <ul id="city"> 19 <li id="bj" name="BeiJing">北京</li> 20 <li>上海</li> 21 <li>东京</li> 22 <li>首尔</li> 23 </ul><br><br> 24 25 <p>你喜欢哪款单机游戏?</p> 26 <ul id="game"> 27 <li id="rl">红警</li> 28 <li>实况</li> 29 <li>极品飞车</li> 30 <li>魔兽</li> 31 </ul><br><br> 32 </body> 33 </html>
2.运行效果
3.节点互换
这种方式需要函数cloneNode（true）
4.程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var bjNode=document.getElementById("bj"); 9 var rlNode=document.getElementById("rl"); 10 var cityNode=document.getElementById("city"); 11 var gameNode=document.getElementById("game"); 12 alert(1); 13 var bjNode2=bjNode.cloneNode(true); 14 //顺序不许弄反 15 gameNode.replaceChild(bjNode2,rlNode); 16 cityNode.replaceChild(rlNode,bjNode); 17 18 } 19 </script> 20 </head> 21 <body> 22 <p>你喜欢哪个城市?</p> 23 <ul id="city"> 24 <li id="bj" name="BeiJing">北京</li> 25 <li>上海</li> 26 <li>东京</li> 27 <li>首尔</li> 28 </ul><br><br> 29 30 <p>你喜欢哪款单机游戏?</p> 31 <ul id="game"> 32 <li id="rl">红警</li> 33 <li>实况</li> 34 <li>极品飞车</li> 35 <li>魔兽</li> 36 </ul><br><br> 37 </body> 38 </html>
5.运行结果
6.自定义互换函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload=function(){ var bjNode=document.getElementById("bj"); var rlNode=document.getElementById("rl"); var cityNode=document.getElementById("city"); var gameNode=document.getElementById("game"); alert(1); replaceEach(bjNode,rlNode); } //自定义互换两个节点的函数 function replaceEach(aNode, bNode){ //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性 var aParent = aNode.parentNode; var bParent = bNode.parentNode; if(aParent && bParent){ //2. 克隆 aNode 或 bNode var aNode2 = aNode.cloneNode(true); //3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild() //方法实现节点的互换 bParent.replaceChild(aNode2, bNode); aParent.replaceChild(bNode, aNode); } } </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul><br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul><br><br> </body> </html>
7.效果
8.对应节点的互换，并且可以多次互换
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var liNodes = document.getElementsByTagName("li"); 9 //2. 为每一个 li 节点添加 Onclick 响应函数 10 for(var i = 0; i < liNodes.length; i++){ 11 //手动为每个 li 节点添加一个 index 属性 12 liNodes[i].index = i; 13 liNodes[i].onclick = function(){ 14 //3. 找到和当前节点对应的那个 li 节点 15 var targetIndex = 0; 16 if(this.index < 4){ 17 targetIndex = 4 + this.index; 18 }else{ 19 targetIndex = this.index - 4; 20 } 21 //交换 index 属性，这个是重点，每次替换时也将index一起互换 22 var tempIndex = this.index; 23 this.index = liNodes[targetIndex].index; 24 liNodes[targetIndex].index = tempIndex; 25 26 //4. 互换. 27 replaceEach(this, liNodes[targetIndex]); 28 } 29 } 30 31 } 32 //自定义互换两个节点的函数 33 function replaceEach(aNode, bNode){ 34 //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性 35 var aParent = aNode.parentNode; 36 var bParent = bNode.parentNode; 37 38 if(aParent && bParent){ 39 //2. 克隆 aNode 或 bNode 40 var aNode2 = aNode.cloneNode(true); 41 42 //3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild() 43 //方法实现节点的互换 44 bParent.replaceChild(aNode2, bNode); 45 aParent.replaceChild(bNode, aNode); 46 } 47 } 48 </script> 49 </head> 50 <body> 51 <p>你喜欢哪个城市?</p> 52 <ul id="city"> 53 <li id="bj" name="BeiJing">北京</li> 54 <li>上海</li> 55 <li>东京</li> 56 <li>首尔</li> 57 </ul><br><br> 58 59 <p>你喜欢哪款单机游戏?</p> 60 <ul id="game"> 61 <li id="rl">红警</li> 62 <li>实况</li> 63 <li>极品飞车</li> 64 <li>魔兽</li> 65 </ul><br><br> 66 </body> 67 </html>
9.运行结果
