Home > Article > Web Front-end > How to add li tags and attributes with jQuery

How to add li tags and attributes with jQuery

php中世界最好的语言Original: 2018-03-14 16:47:374036browse

This time I will bring you jQuerymethods to add li tags and add attributes. Notes on the methods of adding li tags and attributes in jQueryare Which ones, the following are practical cases, let’s take a look.

<%@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>

Running result:

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!

How to add li tags and attributes with jQuery

Related articles