A-A+

js dom 创建元素之笔记

2016年06月23日 web前端设计 评论 1 条 阅读 6 views 次

又学到几个 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.         }//这个是为了浏览器的兼容 //xiariboke.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>  
标签:

1 条留言  访客:1 条  博主:0 条

  1. themebetter

    留个脚印,欢迎来themebetter问答讨论交流各种网站技术问题哦!

给我留言