HTML DOM笔记——1：学习使用insertBefore()方法

定义：在已有的子节点前插入一个新的子节点，也可以移动已有的元素。

 

插入新元素(子节点) ：

 2 <html>
 3 <head>
 4 <meta charset="gb2312">
 5 <title>insertBefore插入新元素(子节点)</title>
 6 <style type="text/css">
 7     li{
 8     list-style-type:none;
 9 }
10 </style>
11 </head>
12 <body>
13 <ul>
14 <li>《大话西游》</li>
15 <li>《东邪西毒》</li>
16 <li>《龙门客栈》</li> 
17 <li>《神雕侠侣》</li>
18 </ul>
19 <script type="text/javascript">
20     //获取该文档流中的第一个"ul"元素的引用，
21    //随后试着用insertBefore函数插入一个子节点
22     var e = document.getElementsByTagName("ul")[0];
23 
24     //创建一个"li"元素，然后插入到ul中
25     var list =  document.createElement("li");
26     //在新创建的"li"中追加文本内容
27     list.appendChild(document.createTextNode("《笑傲江湖》"));
28 
29     //在"ul"的第一个子节点前插入上面创建的"list"节点
30     e.insertBefore(list , e.childNodes[0]);

31 </script>
32 </body>
33 </html>

移动已有的元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>insertBefore插入新元素(子节点)</title>
<style type="text/css">
    li{
    list-style-type:none;
}
</style>
</head>
<body>
<ul>
<li>《大话西游》</li>
<li>《东邪西毒》</li>
<li>《龙门客栈》</li> 
<li>《神雕侠侣》</li>
</ul>
<ul>
<li>《银翼杀手》</li>
<li>《黑客帝国》</li>
<li>《异形》</li>
<li>《星球大战》</li>
</ul>
<script type="text/javascript">
    //获取该文档流中的第一个"ul"元素的引用，
   
    var f_e = document.getElementsByTagName("ul")[0];

    //获取该文档流的第二个"ul"元素的引用

    var l_e = document.getElementsByTagName("ul")[1];

   //把文档流的第二个"ul"对象中的第三个子元素移动到文档流
   //第一个"ul"中去
   //有点需要记忆的，对象的第一个子元素是空白行
   //如果要移动能看得见（显示出来）的子元素的下标应该是单数(奇数)
    f_e.insertBefore(l_e.childNodes[1] , f_e.childNodes[2]);
</script>
</body>
</html>

 

posted @ 2017-05-09 01:16  nopass  阅读(384)  评论(0)    收藏  举报