JavaScript的DOM编程--11--插入节点
插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。
1 <!DOCTYPE html>
2 <html >
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 ><li name="BeiJing">北京</li>
48 <li>上海</li>
49 <li >东京</li>
50 <li >首尔</li>
51 </ul>
52
53 <br><br>
54 <p>你喜欢哪款单机游戏?</p>
55 <ul >
56 <li >红警</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>