`
yunmoxue
  • 浏览: 285331 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

js添加div

    博客分类:
  • ajax
IE 
阅读更多
一. 添加div
  不指添加div,添加其他元素都可以通过这种方式
<html>
<script language="javascript">
i=1;
/*添加div*/
 function add(){
	//创建一个div
	var my = document.createElement("div");
	//添加到页面
	document.body.appendChild(my);
	//通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看
	my.style.position="absolute";
	//通过样式指定x坐标(随机数0~450)
	my.style.top= Math.round(Math.random()*450);
	//通过样式指定y坐标(随机数0~700)
	my.style.left= Math.round(Math.random()*700);
	//通过样式指定宽度
	my.style.width=100;
	//通过样式指定高度
	my.style.height=100;
	//通过样式指定背景颜色,,若是背景图片 例为my.style.backgroundImage="url(img/3.jpg)"
	my.style.backgroundColor="#ffffcc";
	//添加div的内容
	my.innerHTML=i++;
 }
</script>
<head>
<title>动态添加div</title>
</head>
<body>
<form>
<input type="button" value="添加" onclick="add()" />
</form>
</body>
</html>


二.动态添加事件

<html>
<head>
<title>动态添加事件</title>
<script language="javascript">
i=1;
 /*用来测试的方法*/
 function test1(){
	alert("用我了吧;")
 }
 /*用来测试带参数的方法*/
 function test2(par){
	alert(par); 
 }
 /*添加层*/
 function add(){
	var my = document.createElement("div");
	document.body.appendChild(my);
	my.style.backgroundColor="#ffccff";
	my.innerHTML="点我一下";
	//看好拉!关键的地方,第一种方法
	my.setAttribute("onclick",function(){ test1() });
	/*setAttribute(a,b)该方法添加标签的属性和属性的值,有俩个参数,第一个参数a是属性名称,第二个参数b是属性的值;因为onclick也是div标签的一个属性,所以可以这样设置;*/

	var my2 = document.createElement("div");
	document.body.appendChild(my2);
	//设置id
	my2.id=i;
	my2.style.backgroundColor="#ffcc00";
	my2.innerHTML="点我一下";

	/*第二种方法*/
	//让id变成字符串
	var idd=i+"";
	//通过id找到该标签,设置他的onclick事件
	document.getElementById(i).onclick=function(){ test2(i)};
	i++;
 }
</script>
</head>
<body>
请用ie打开,不好意思.呵呵
<form>
<input type="button" value="添加" onclick="add()"/>
</form>
</body>
</html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics