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... 
 });