Home > Article > Web Front-end > How to dynamically add li tags and add attributes and bind event methods in jQuery
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",'list-group-item'); //为li标签添加class属性 } $('li').on('click',function(){ //绑定事件 alert("事件绑定成功!"); }); </script> </body> </html>
Running result:
#The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
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!