js创建元素案例

最新推荐文章于 2022-04-28 21:40:53 发布

林剑南

最新推荐文章于 2022-04-28 21:40:53 发布

阅读量234

点赞数

分类专栏： js案例文章标签： js创建元素案例

js案例专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="button" value="创建一个p	" id="btn" />
		<div id="dv"></div>
		
		<script>
			/*
		 *元素创建的三种方式
		 1.document.write("标签的代码及内容")
		 2.对象。innerHtml="标签及代码"
		 3.document.createElement（"标签的名字"）
		 */
		
		//点击按钮创建p标签
			function mm(id){
				return document.getElementById(id)
			}
			var  name1=["222","333","444","5555","6666"];
			
			
			mm("btn").onclick=function(){
				var   str="<ul style='list-style: none; cursor: pointer;'>";
			for (var i = 0; i < name1.length; i++) {
				str+="<li>"+name1[i]+"</li>";
				name1[i]
			}
			
			str+="</ul>";
			mm("dv").innerHTML=	str;//存字符串外双内单 变量拼接使用双引号
			
			//获取所有li遍历添加鼠标事件
			var list= mm("dv").getElementsByTagName("li");
			
				for (var i = 0; i < list.length; i++) {
					list[i].onmouseover=function(){
						this.style.backgroundColor="red";
						console.log("::::::::::::::::::"+this)
					}
						list[i].onmouseout=function(){
						this.style.backgroundColor="";
					}
				}
			}
			
		</script>
	</body>
</html>