js中动态添加插⼊HTML代码块，并通过JQuery动态绑定点击
事件
⽂章⽬录
前⾔
本篇⽂章中讲的是在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
官⽹jquery压缩版引⽤地址:
1
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 + '>' +
jquery源码在线'<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⽅法
}
这⾥我给每个<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⽅法来动态绑定点击事件的详细解说了。如果有疑问的话请在评论区留⾔，如果我看到的话会在第⼀时间进⾏回答的哦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。