js中动态添加/插入HTML代码块，并通过JQuery动态绑定点击事件

文章目录

前言

一、场景需求还原 

二、代码示例

1.引入JQuery库

2.代码示例

一：HTML中div标签部分

二：HTML中script标签部分

三：JS文件部分

总结

---

---

前言

本篇文章中讲的是在js中动态添加/插入HTML代码块，并通过JQuery动态绑定点击事件。本篇文章是针对在写静态页面时需要时而更新部分列表代码，转而使用js来存储一个列表数据能方便更新列表数据而写的。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、场景需求还原

 

比如说，这里有4个<ul>标签，分别是工作软件、音乐软件、技术软件、电脑游戏。然后他们下面分别还有两个<li>标签。这个情况相当于时有4个大类，然后每个大类商品里边有各个类中的不同的商品信息。

因为我这里需要时而更新商品列表，我这里一个ul标签就有20行代码，而且整个页面代码有几千行代码，所以直接复制粘贴<li>部分标签代码，是特别麻烦的。，然后这个情况就可以用到我们的这个动态js嵌入HTML代码的方法了。 

下边来说说代码部分吧。

二、代码示例

1.引入JQuery库

 我们这里需要引入JQuery库，因为我们需要动态绑定点击事件，需要用到里边的 on 方法。JQuery版本的话用哪个都可以，我们这里选则的是最新版

这个是生产环境中的包，代码全部被压缩了，减小体积。

<script src="js/jquery.min.js"></script>

这个是开发环境下的包，里边的代码很方便我们查看源代码，利于学习。

<script src="js/jquery.js"></script>

这里提供一下jquery-3.5.1（最新）的CDN。

 

微软jquery压缩版引用地址:

1	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

官网jquery压缩版引用地址:

1	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2.代码示例

一：HTML中div标签部分

<!-- 商品列表 -->
<div class="row row-padded" id="commodityId">

</div>

二：HTML中script标签部分

// 页面加载方法
$(function() {
	loadCommodity()
});
//商品列表加载方法
function loadCommodity() {
	let htmllet = "";
	for (var i = 0; i < commodityList.length; i++) {
		htmllet += '<div class="col-md-6">' +
			'<div class="fh5co-food-menu to-animate-2">' +
			'<h2 class="fh5co-drinks">' + commodityList[i].title + '</h2>' +
			'<ul>'
		for (var j = 0; j < commodityList[i].shopList.length; j++) {
			htmllet += '<li id='+commodityList[i].shopId+"" + j + '>' +
				'<div class="fh5co-food-desc">' +
				'<figure>' +
				'	<img src="' + commodityList[i].shopList[j].shopImg + '" class="img-responsive">' +
				'</figure>' +
				'<div>' +
				'	<h3>' + commodityList[i].shopList[j].shopName + '</h3>' +
				'	<p>' + commodityList[i].shopList[j].shopDescribe + '</p>' +
				'</div>' +
				'</div>' +
				'<div class="fh5co-food-pricing">' +
				commodityList[i].shopList[j].shopMoney + '元' +
				'</div>' +
				'</li>'
    //动态绑定点击事件部分
				let shopValue=commodityList[i].shopId+"" + j;
				$(document).on("click",'#'+shopValue,function(){
					window.location.href="detaile.html?value="+shopValue
				})
		}
		
		htmllet +='</ul></div></div>'
	}
	//嵌入HTML方法
	document.getElementById("commodityId").innerHTML = htmllet;
}

这里我给每个<li>标签添加了一个id，这里需要动态绑定点击事件，点击商品后进入到这个商品的详情页面，所以我们需要不同的id，来进入到不同商品的特定商品详情页面，通过这个id来区分展示哪个商品的信息。

动态绑定点击事件部分这里的commodityList[i].shopId+"" + j;在on方法里边是直接拿不到的，需要定义局部或者全局变量来进行一个传值。

然后这个添加一个window.location.href来进行页面跳转，后边的value值用来区分点击的是哪个商品。最后在商品详情页面的事件加载方法里边可以通过window.location.search来获取到链接问号后边的字符串，再通过判断来进行页面渲染操作。

三：JS文件部分

//定义全局变量
var commodityList=[
	{
		shopId:'gz',
		title:"工作软件",
		shopList:[
			{shopImg:'images/res_img_5.jpg',shopName:'gz1',shopDescribe:'gz1',shopMoney:'1000'},
			{shopImg:'images/res_img_5.jpg',shopName:'gz2',shopDescribe:'gz2',shopMoney:'1000'}
		]
	},
	{
		shopId:'yy',
		title:"音乐软件",
		shopList:[
			{shopImg:'images/res_img_5.jpg',shopName:'yy1',shopDescribe:'yy1',shopMoney:'888'},
			{shopImg:'images/res_img_5.jpg',shopName:'yy2',shopDescribe:'yy2',shopMoney:'888'}
		]
	},
	{
		shopId:'js',
		title:"技术软件",
		shopList:[
			{shopImg:'images/res_img_5.jpg',shopName:'js1',shopDescribe:'js1',shopMoney:'999'},
			{shopImg:'images/res_img_5.jpg',shopName:'js2',shopDescribe:'js2',shopMoney:'999'}
		]
	},
	{
		shopId:'dn',
		title:"电脑游戏",
		shopList:[
			{shopImg:'images/res_img_5.jpg',shopName:'dn1',shopDescribe:'dn1',shopMoney:'777'},
			{shopImg:'images/res_img_5.jpg',shopName:'dn2',shopDescribe:'dn1',shopMoney:'777'}
		]
	},
	{
		shopId:'sj',
		title:"手机游戏",
		shopList:[
			{shopImg:'images/res_img_5.jpg',shopName:'sj1',shopDescribe:'sj1',shopMoney:'666'},
			{shopImg:'images/res_img_5.jpg',shopName:'sj1',shopDescribe:'sj1',shopMoney:'666'}
		]
	}
]

我这里是有两个列表，第一个循环ul部分，第二个循环li部分。如果你只需要写一个ul里边有多个li的话则只需要写一个循环。

---

总结

以上就是JS动态嵌入HTML代码，并通过JQuery中的on方法来动态绑定点击事件的详细解说了。如果有疑问的话请在评论区留言，如果我看到的话会在第一时间进行回答的哦。