jQuery动态添加html标签

场景 调用后台返回的json数据解析之后,在前台动态渲染

主要用的jQuery的

$("p").append("<b>Hello</b>");

方法里面可以添加你要显示的标签和解析的数据

$(".contet-box4").append(
          "<div class='content content-self-1'><h4 class='left'>" +
          //这是变量,解析过来的数据
            item.policyName +
            "</h4 >" +
            "<img class='right' id='increase-heigh' src='images/zhankai.png' alt=''>" +
            '<div class="clearfix"></div>' +
            '<div class="info-box">' +
            '<div class="left" style="width: 40%;">' +
            '<img class="left" src="images/call.png" alt="">' +
           

注意几点

  1. 标签要用'括起来
  2. 变量的前后要加+
  3. 一个标签的末尾要加+

步骤

  • 先写静态页面
  • 大概调好样式
  • 把你要动态渲染的标签和变量放在append()
  • 删除html中的标签
  • 你要动态渲染的标签要放在一个div里好操作

给动态添加的标签添加事件如点击事件

个人习惯用
on方法大多数版本的jquery都是支持这个方法的
已测版本jquery 3.2.0
.input是父级标签的类,.select是你要添加的标签事件的类


$(' .input').on('click', '.select', function (event) {
    console.log('用on绑定动态生成的元素')
});

多个标签绑定同一个事件

静态标签
$("#div1,.div2,.div3").click(function(){ 
// code... 
});
 动态生成的标签
$(document).on('click', "#div1,.div2,.div3", function () { 
     // code... 
 });
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RDSunday

爱,就供养;喜欢/受益,就打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值