动态生成ul的li并添加addEventListener

最新推荐文章于 2024-04-19 12:54:59 发布

江醉鱼

最新推荐文章于 2024-04-19 12:54:59 发布

阅读量772

点赞数

分类专栏： js进阶

本文链接：https://blog.csdn.net/me_never/article/details/103842404

版权

js进阶专栏收录该内容

21 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>li</title> 
<style>
	ul{
		list-style:none
	}
	li{
		width:200px;
		height:30px;
		background: green;
		border:1px solid #000;
		margin:5px auto;
	}
</style>
</head>
<body>
	<button onclick="addFunction()">点我增加</button>
	<ul></ul>
	<script type="text/javascript">
	var num = 1;
	var u=document.querySelector("ul");
	function addFunction(){
	  var l=document.createElement('li')
	  var t=document.createTextNode(num);
	  l.appendChild(t);
	  u.appendChild(l);
	  num++
	};
	u.addEventListener('click',function(e){
	  console.log(777);
	  if(e.target && e.target.nodeName.toUpperCase() === 'LI') {
		console.log(e.target.innerHTML);
	  }
	})
	</script>
</body>
</html>