js添加div

时间：2024-04-15 11:39:29

一. 添加div
  不指添加div,添加其他元素都可以通过这种方式

Java代码 复制代码
  1. <html>   
  2. <script language="javascript">   
  3. i=1;   
  4. /*添加div*/  
  5.  function add(){   
  6.     //创建一个div   
  7.     var my = document.createElement("div");   
  8.     //添加到页面   
  9.     document.body.appendChild(my);   
  10.     //通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看   
  11.     my.style.position="absolute";   
  12.     //通过样式指定x坐标(随机数0~450)   
  13.     my.style.top= Math.round(Math.random()*450);   
  14.     //通过样式指定y坐标(随机数0~700)   
  15.     my.style.left= Math.round(Math.random()*700);   
  16.     //通过样式指定宽度   
  17.     my.style.width=100;   
  18.     //通过样式指定高度   
  19.     my.style.height=100;   
  20.     //通过样式指定背景颜色,,若是背景图片 例为my.style.backgroundImage="url(img/3.jpg)"   
  21.     my.style.backgroundColor="#ffffcc";   
  22.     //添加div的内容   
  23.     my.innerHTML=i++;   
  24.  }   
  25. </script>   
  26. <head>   
  27. <title>动态添加div</title>   
  28. </head>   
  29. <body>   
  30. <form>   
  31. <input type="button" value="添加" onclick="add()" />   
  32. </form>   
  33. </body>   
  34. </html>  


二.动态添加事件

Java代码 复制代码
  1. <html>   
  2. <head>   
  3. <title>动态添加事件</title>   
  4. <script language="javascript">   
  5. i=1;   
  6.  /*用来测试的方法*/  
  7.  function test1(){   
  8.     alert("用我了吧;")   
  9.  }   
  10.  /*用来测试带参数的方法*/  
  11.  function test2(par){   
  12.     alert(par);    
  13.  }   
  14.  /*添加层*/  
  15.  function add(){   
  16.     var my = document.createElement("div");   
  17.     document.body.appendChild(my);   
  18.     my.style.backgroundColor="#ffccff";   
  19.     my.innerHTML="点我一下";   
  20.     //看好拉!关键的地方,第一种方法   
  21.     my.setAttribute("onclick",function(){ test1() });   
  22.     /*setAttribute(a,b)该方法添加标签的属性和属性的值,有俩个参数,第一个参数a是属性名称,第二个参数b是属性的值;因为onclick也是div标签的一个属性,所以可以这样设置;*/  
  23.   
  24.     var my2 = document.createElement("div");   
  25.     document.body.appendChild(my2);   
  26.     //设置id   
  27.     my2.id=i;   
  28.     my2.style.backgroundColor="#ffcc00";   
  29.     my2.innerHTML="点我一下";   
  30.   
  31.     /*第二种方法*/  
  32.     //让id变成字符串   
  33.     var idd=i+"";   
  34.     //通过id找到该标签,设置他的onclick事件   
  35.     document.getElementById(i).onclick=function(){ test2(i)};   
  36.     i++;   
  37.  }   
  38. </script>   
  39. </head>   
  40. <body>   
  41. 请用ie打开,不好意思.呵呵   
  42. <form>   
  43. <input type="button" value="添加" onclick="add()"/>   
  44. </form>   
  45. </body>   
  46. </html>  

 

相关文章