js添加div

最新推荐文章于 2023-06-10 18:39:47 发布

yzbczq

最新推荐文章于 2023-06-10 18:39:47 发布

阅读量162

点赞数

分类专栏： ajax 文章标签： IE

ajax 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

[color=orange][size=large]一. 添加div[/size][/color]
  不指添加div,添加其他元素都可以通过这种方式
[code="java"]<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>

[color=orange][size=large]二.动态添加事件[/size][/color]

<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>

yzbczq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js添加div

[code="java"][color=orange][size=large]一. 添加div[/size][/color] 不指添加div,添加其他元素都可以通过这种方式[code="java"]i=1;/*添加div*/ function add(){ //创建一个div var my = document.createElement("div"); //...
复制链接

扫一扫

专栏目录