小虎博客

A-A+

js dom 创建元素之笔记

2016年06月23日 编程技术 暂无评论

又学到几个 dom 实例的函数，创建元素使用的是 createElement()，追加元素是 appendChild()，在某个位置添加元素 insertBefore()，学习的挺乱，但总算还是可以把实例代码给敲出来的，下面的这个实例是在 ul 下面创建 li 的元素，先看下面的效果图如下:

首先在左侧的文本框里面添加文字，然后点击右侧的创建li按钮，下面则会创建一个新的 li 以及里面的文字，重要提，兼容各种浏览器喔，好了，看一下我按照视频教程敲出来的实例代码吧，如下：

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>创建元素</title>  
  6. <script>  
  7. window.onload = function(){  
  8.     var oBtn = document.getElementById('btn1');  
  9.     var oUl = document.getElementById('ul1');  
  10.     var oText = document.getElementById('text1');  
  11.       
  12.     oBtn.onclick = function(){  
  13.           
  14.         var oLi = document.createElement('li');  
  15.         var aLi = document.getElementsByTagName('li');  
  16.           
  17.         oLi.innerHTML = oText.value;  
  18.           
  19.         //oUl.appendChild(oLi); //追加 li  
  20.           
  21.         if(aLi.length>0){  
  22.             oUl.insertBefore(oLi,aLi[0]);  
  23.         }else{  
  24.             oUl.appendChild(oLi); //追加 li  
  25.         }//这个是为了浏览器的兼容 //xiaohuboke.com  
  26.           
  27.     }     
  28. }  
  29. </script>  
  30. </head>  
  31. <body>  
  32. <input id="text1" type="text">  
  33. <input id="btn1" type="button" value="创建li">  
  34. <ul id="ul1">  
  35. </ul>  
  36. </body>  
  37. </html>  
标签：

给我留言