How to dynamically add li tags and add attributes and bind event methods in jQuery-JS Tutorial-php.cn

How to dynamically add li tags and add attributes and bind event methods in jQuery

亚连

Release： 2018-06-05 09:23:36

Original

4407 people have browsed it

Below I will share with you an article about jQuery dynamically adding li tags and adding attributes and binding event methods. It has a good reference value and I hope it will be helpful to everyone.

The code is as follows:

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script> 
 <!-- 3.0 --> 
 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> 
 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
</head>
<body>
<ul id="listproject" class="list-group">
		<script type="text/javascript">			
		var JSarray = new Array();
		JSarray[0] = "array0";
		JSarray[1] = "array1";
		JSarray[2] = "array2";
		JSarray[3] = "array3";
		JSarray[4] = "array4";
		
		for(var i = 0;i<5;i++){
			$("#listproject").append("<li id=li"+i+">"+JSarray[i]+"</li>");	//在ul标签上动态添加li标签
			$("#li"+i).attr("class",&#39;list-group-item&#39;);		//为li标签添加class属性
		}
		$(&#39;li&#39;).on(&#39;click&#39;,function(){ 		//绑定事件
		 alert("事件绑定成功！"); 
		}); 
	</script>
</body>
</html>

Copy after login

Running result:

#The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use puppeteer to crack the sliding verification code of JiExperience

How to use elementUI to implement in Vue Custom theme method

#How to change the page color in JS (detailed tutorial)

The above is the detailed content of How to dynamically add li tags and add attributes and bind event methods in jQuery. For more information, please follow other related articles on the PHP Chinese website!