JavaScript 实例：点击漫天小星星创建标签元素并加到父标签下_前端原生创建标签后添加到父元素的孩子上-CSDN博客

本文链接：https://blog.csdn.net/houyanhua1/article/details/78476758

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" οnclick="star(event)"> <!--可以在整个html页面绑定点击事件，将事件event作为参数进行传递-->
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>漫天星星</title>
	<meta name="keywords" content="关键字列表" />
	<meta name="description" content="网页描述" />
	<link rel="stylesheet" type="text/css" href="" />
	<style type="text/css">
		body{
			margin:0px;
			height:300px;  /* 为body标签指定高度，否则高度可能是0px */
		}
	</style>
	<script type="text/javascript">
		//window.setInterval("star(event)",1000);
		//在页面点击，能够出现小星星
		//这个图片是随机大小的
		window.οnlοad=init;  //页面加载时执行init函数，注意init后没括号。
		function init(){
			document.body.bgColor="black";
		}
		function star(e){  //将事件event作为参数进行传递
			var obj=document.createElement("img");
			obj.src="images/xingxing.gif";	
			var w=Math.floor(Math.random()*(90-30+1))+30; //让星星的宽度随机变化(30到90之间的宽度)
			obj.width=w;//随机宽度(大小)
			//出现在鼠标点击的位置
			var x=e.clientX;  //获取鼠标位置坐标
			var y=e.clientY;
			obj.style.position="absolute";  //绝对定位，相对于有relative属性的祖先标签，直到body标签。
			obj.style.top=y+"px";
			obj.style.left=x+"px";
			document.body.appendChild(obj);  //必须把创建的img标签加到body标签下，才能生效。
		}
	</script>
</head>
<body>  <!--如果要在body标签中绑定鼠标事件οnclick=""，需要为body标签指定高度，否则高度会是0px，导致无法点击-->
<img src="images/xingxing.gif" />
</body>
</html>