jq动态拼接html页面及数据_jquery拼接html代码，2024年最新腾讯T2大牛手把手教你网上学习资料一大堆，但

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

实现:

在这之前我们需要了解下apppend()与html()这两个方法的区别:
简单来说就是append（）方法是在元素列表添加某个元素，但是html（）是替换元素中的数据。如果需要做换页，导航此类的效果最好使用html（）方法

废话不多说直接上代码:

1.首先在需要动态拼接的地方的父级标签可以加上一个id或者class类名区别倒是不大个人都是加className 如下(templateArea即是我们会在其下面拼接html页面及数据):

<body>
<div class="page">
    <div class="tab\_line clearfix">
        <a class="tab\_line\_a" href="/reportPage?mainId=${mainId !}&year=${year !}&isFillIn=${mainId !}">医疗质量</a>
        <a class="tab\_line\_a" href="/reportPageOperate?mainId=${mainId !}&year=${year !}&isFillIn=${isFillIn !}">运营效率</a>
        <a class="tab\_line\_a now\_a">持续发展</a>
        <a class="tab\_line\_a" href="/reportPageSatisface?mainId=${mainId !}&year=${year !}&isFillIn=${isFillIn !}">满意度</a>
    </div>
    <div class="templateArea">

    </div>
    <div class="bottom">
        <a href="/homepage" class="operation\_line\_button fr">返回</a>
        <div class="operation\_line\_button operation\_line\_button\_blue fr save">保存</div>
    </div>
</div>
</body>

2.ajax获取到数据根据数据情况和需求可自主选择拼接流程以下为我个人需求拼接:
主要步骤为:
a.新建变量用来存放页面即:var list=""
b.将对应页面放到list中如需要放一个input 则为:list+=“input标签” 主要就是这种格式
c.最后就是$(".templateArea").append(list)

大概就是这三步但是需求都是不一样的所以说根据自己情况进行改动有这个思路就可

function getTemplateList(param) {
        jQuery.ajax({
            url: systemBaseInterface + "/sustainedAdd/findSustainedTemplateList",
            type: "POST",
            cache: false,
            async: false,
            data: param,
            dataType: "json",
            success: function (data, text) {
                var list = "";
                for (var i = 0; i < data.data.length; i++) {
                    if (i == 0) {
                        list += "<div class=\"content\">\n" +
                                " <div class=\"title\">" + data.data[i].content + "<span style=\"float: right\">" + ${year !} + "</span></div>\n" +
                                " <table class=\"content\_table\">\n" +
                                " <tr>\n" +
                                " <th></th>\n" +
                                " <th></th>\n" +
                                " <th></th>\n" +
                                " <th></th>\n" +
                                " </tr>"
                    } else {
                        list += "<div class=\"content\">\n" +
                                " <div class=\"title\">" + data.data[i].content + "\n" +
                                " </div>\n" +
                                "<table class=\"content\_table functionalPositionArea\">\n" +
                                " <tr>\n" +
                                " <th></th>\n" +
                                " <th></th>\n" +
                                " <th></th>\n" +
                                " <th></th>\n" +
                                " </tr>"
                    }
                    jQuery.ajax({
                        url: systemBaseInterface + "/sustainedAdd/findSustainedTemplateList",
                        type: "POST",
                        cache: false,
                        async: false,
                        data: {"parentCode": data.data[i].code},
                        dataType: "json",
                        success: function (data, text) {
                            for (var j = 0; j < data.data.length; j++) {
                                var content = JSON.parse(htmlDecode(data.data[j].content))
                                if (content.threeType == "定性") {
                                    list += " <tr>\n" +
                                            " <td class=\"content\_table\_label\">" + content.threeName + "</td>\n" +
                                            " <td colspan=\"3\">\n" +
                                            " <div class=\"content\_table\_block content\_table\_block1\">\n" +
                                            " <div class=\"dropdown\">\n" +
                                            " <input name=\"\" autocomplete=\"off\" type=\"text\" data-name=" + content.threeName + " data-code=" + data.data[j].code + " id="+ data.data[j].code +" data-count=" + data.data[j].isCount + " code=" + data.data[j].code + " class=\"dropdown\_input normal result\" readonly=\"readonly\" placeholder=\"请选择\" style=\"cursor: auto;\">\n" +
                                            " <img alt=\"选择\" src=\"../img/dropdown.png\" class=\"dropdown\_img\">\n" +
                                            " <ul class=\"dropdown\_menu\">"
                                    for (var k = 0; k < content.option.length; k++) {
                                        list += " <li class=\"overflow dropdown\_menu\_li\" code=" + k + 1 + ">" + content.option[k].xuanxiang + "</li>\n"
                                    }
                                    list += " </ul>\n" +
                                            " </div>\n" +
                                            " </div>\n" +
                                            " </td>\n" +
                                            " </tr>"
                                } else if (content.threeType == "定量") {
                                    for (var k = 0; k < content.tiaojian.length; k++) {
                                        if (k == 0) {
                                            var kk = k + 1;
                                            list += " <tr>\n" +
                                                    " <td class=\"content\_table\_label\" rowspan=" + content.tiaojian.length + ">" + content.threeName + "</td>\n" +
                                                    " <td rowspan=" + content.tiaojian.length + ">\n" +
                                                    " <div class=\"content\_table\_block\">\n" +
                                                    " <input type=\"text\" class=\"content\_table\_block\_text result result\_type3\" data-count=" + data.data[j].isCount + " data-code=" + data.data[j].code + " data-name=" + content.threeName + " code=" + data.data[j].code + " id=\"value" + data.data[j].code + "\_result\">\n" +
                                                    " <span class=\"unit overflow\">" + content.threeUnit + "</span>\n" +
                                                    " </div>\n" +
                                                    " </td>\n" +
                                                    " <td class=\"content\_table\_label\">" + content.tiaojian[0].condition + "</td>\n" +
                                                    " <td>\n" +
                                                    " <div class=\"content\_table\_block\">\n" +
                                                    " <input type=\"text\" class=\"content\_table\_block\_text condition " + data.data[j].code + "\_condition\" data-name=" + content.threeName + " data-count=" + data.data[j].isCount + " data-code=" + data.data[j].code + " code=" + data.data[j].code +"\_"+kk +" οnkeyup='keyUp(data.data[j].code,JSON.stringify(content.suanfa))' id=" + data.data[j].code +"\_"+kk +">\n" +
                                                    " <span class=\"unit overflow\">" + content.tiaojian[0].conditionUnit + "</span>\n" +
                                                    " </div>\n" +
                                                    " </td>\n" +
                                                    " </tr>"
                                        } else {
                                            var kk = k + 1;
                                            list += "<tr>\n" +
                                                    " <td class=\"content\_table\_label\">" + content.tiaojian[k].condition + "</td>\n" +
                                                    " <td>\n" +
                                                    " <div class=\"content\_table\_block\">\n" +
                                                    " <input type=\"text\" class=\"content\_table\_block\_text condition " + data.data[j].code + "\_condition\" data-name=" + content.threeName + " οnkeyup='keyUp(" + data.data[j].code + "," + JSON.stringify(content.suanfa) + ")' data-code=" + data.data[j].code + " data-count=" + data.data[j].isCount + " code=" + data.data[j].code +"\_"+kk +" id=" + data.data[j].code +"\_"+kk +">\n" +
                                                    " <span class=\"unit overflow\">" + content.tiaojian[k].conditionUnit + "</span>\n" +
                                                    " </div>\n" +
                                                    " </td>\n" +
                                                    " </tr>"
                                        }
                                    }
                                } else {
                                    list += "<tr>\n" +
                                            " <td class=\"content\_table\_label\">" + content.threeName + "</td>\n" +
                                            " <td colspan=\"3\">\n" +
                                            " <div class=\"content\_table\_block\">\n" +
                                            " <input type=\"text\" class=\"content\_table\_block\_text result\" data-name=" + content.threeName + " data-count=" + data.data[j].isCount + " data-code=" + data.data[j].code + " code=" + data.data[j].code + " id="+ data.data[j].code +">\n" +
                                            " <span class=\"unit overflow\">" + content.threeUnit + "</span>\n" +
                                            " </div>\n" +
                                            " </td>\n" +
                                            " </tr>"
                                }
                            }
                            list += "</table>\n" +
                                    " </div>"
                        }
                    })
                }
                $(".templateArea").append(list)
            }
        })
    }

这里是我的拼装代码我是分三种情况进行拼接的因需求而异 这种方法笨是笨了点不过身为后台开发的有时候想不到思路的话这种拼接倒也不失为一种解决方案

最后给大家看下效果:
在这里插入图片描述

我这里是先加载头信息 bb 然后加载的是三种不同的框(下拉框输入框两条件一结果框)

二、腾讯template封装数据

这里给大家扩展一个其他的封装数据的方法 template模板引擎框架这里是在腾讯template基础上使用些许改变

我用的是template-native-3.0.1.js 大家有兴趣可以找下源码看下
个人认为template用于这些table之类的循环是挺爽的(大佬勿喷)
使用如下:
1.首先 js获取到后台数据列表通过template进行封装

 user.userData = function (param) {
        return $.ajax({
            url: systemBaseInterface + "/base/userData",
            data: param,
            failed: function (code, msg) {
                DiaLogBox.error(msg);
            },
            success: function (data) {
                template.loadData("user", data.data, function (ele) {
                    $(ele).show();
                    user.tableInit();
                });

                $("#userlist").setPager(data.data, function () {
                    user.userData(param);
                });
            }
        });
    };

2.然后在页面调用方法如下:
页面调用主要分为几步:
a.设置template-name="你在js中设置的名字"
b.循环数据(我这里的list是因为我是分页最后一层是list目录然后你们可以看数据情况进行循环)
c.放入数据即可
在这里插入图片描述
3.效果如下:

最后给大家放下template-native-3.0.1.js源码有兴趣看下:

!function () {
    function a(a) {
        return a.replace(t, "").replace(u, ",").replace(v, "").replace(w, "").replace(x, "").split(/^$|,+/)
    }

    function b(a) {
        return "'" + a.replace(/('|\\)/g, "\\$1").replace(/\r/g, "\\r").replace(/\n/g, "\\n") + "'"
    }

    function c(c, d) {
        function e(a) {
            return m += a.split(/\n/).length - 1, k && (a = a.replace(/\s+/g, " ").replace(/<!--.\*?-->/g, "")), a && (a = s[1] + b(a) + s[2] + "\n"), a
        }

        function f(b) {
            var c = m;
            if (j ? b = j(b, d) : g && (b = b.replace(/\n/g, function () {
                return m++, "$line=" + m + ";"
            })), 0 === b.indexOf("=")) {
                var e = l && !/^=[=#]/.test(b);
                if (b = b.replace(/^=[=#]?|[\s;]\*$/g, ""), e) {
                    var f = b.replace(/\s\*\([^\)]+\)/, "");
                    n[f] || /^(include|print)$/.test(f) || (b = "$escape(" + b + ")")
                } else b = "$string(" + b + ")";
                b = s[1] + b + s[2]
            }
            return g && (b = "$line=" + c + ";" + b), r(a(b), function (a) {
                if (a && !p[a]) {
                    var b;
                    b = "print" === a ? u : "include" === a ? v : n[a] ? "$utils." + a : o[a] ? "$helpers." + a : "$data." + a, w += a + "=" + b + ",", p[a] = !0
                }
            }), b + "\n"
        }

        var g = d.debug, h = d.openTag, i = d.closeTag, j = d.parser, k = d.compress, l = d.escape, m = 1,
            p = {$data: 1, $filename: 1, $utils: 1, $helpers: 1, $out: 1, $line: 1}, q = "".trim,
            s = q ? ["$out='';", "$out+=", ";", "$out"] : ["$out=[];", "$out.push(", ");", "$out.join('')"],
            t = q ? "$out+=text;return $out;" : "$out.push(text);",
            u = "function(){var text=''.concat.apply('',arguments);" + t + "}",
            v = "function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);" + t + "}",
            w = "'use strict';var $utils=this,$helpers=$utils.$helpers," + (g ? "$line=0," : ""), x = s[0],
            y = "return new String(" + s[3] + ");";
        r(c.split(h), function (a) {
            a = a.split(i);
            var b = a[0], c = a[1];
            1 === a.length ? x += e(b) : (x += f(b), c && (x += e(c)))
        });
        var z = w + x + y;
        g && (z = "try{" + z + "}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:" + b(c) + ".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");
        try {
            var A = new Function("$data", "$filename", z);
            return A.prototype = n, A


![img](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a51caa3a49a340d692bd3d09d6641b2e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771920490&x-signature=E4EHFYb0gEbivXDfp5swPRFjDx8%3D)
![img](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e877be3818ef4d2f97e5889c13b63ddf~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771920490&x-signature=PUg3B1V9NLwhCsgoU7FH52Wmojw%3D)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://gitee.com/vip204888)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**