JavaScript的DOM编程--11--插入节点
插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>插入节点</title> 6 <script type="text/javascript"> 7 //测试 insertBefore() 插入节点 8 //该方法除了进行插入外, 还有移动节点的功能. 9 window.onload=function(){ 10 //1. 把 #rl 插入到 #bj 节点的前面 11 var cityNode=document.getElementById("city"); 12 var bjNode=document.getElementById("bj"); 13 var rlNode=document.getElementById("rl"); 14 15 alert("测试开始了") 16 //cityNode.insertBefore(rlNode,bjNode);//(新，目标节点) 17 18 19 //测试方法 20 var refNode = document.getElementById("dj"); 21 insetAfter(rlNode,refNode); 22 } 23 24 25 //写一个insetAfter方法/把 newNode 插入到 refNode 的后面 26 function insetAfter(newNode,refNode){ 27 //1. 测试 refNode 是否为其父节点的最后一个子节点 28 var parentNode=refNode.parentNode; 29 if(parentNode){ 30 var lastNode=parentNode.lastChild; 31 //2. 若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点 32 if(refNode==lastNode){ 33 parentNode.appendChild(newNode); 34 } 35 36 //3. 若不是: 获取 refNode 的下一个兄弟节点, 然后插入到其下一个兄弟节点的前面. 37 else{ 38 var nextNode=refNode.nextSibling; 39 parentNode.insertBefore(newNode,nextNode); 40 } 41 } 42 } 43 </script> 44 </head> 45 <body> 46 <p>你喜欢哪个城市?</p> 47 <ul id="city"><li id="bj" name="BeiJing">北京</li> 48 <li>上海</li> 49 <li id="dj">东京</li> 50 <li id="se">首尔</li> 51 </ul> 52 53 <br><br> 54 <p>你喜欢哪款单机游戏?</p> 55 <ul id="game"> 56 <li id="rl">红警</li> 57 <li>实况</li> 58 <li>极品飞车</li> 59 <li>魔兽</li> 60 </ul> 61 62 <br><br> 63 gender: 64 <input type="radio" name="gender" value="male"/>Male 65 <input type="radio" name="gender" value="female"/>Female 66 67 <br><br> 68 name: <input type="text" name="username" value="atguigu"/> 69 70 </body> 71 </html>
