jq动态拼接html页面及数据，内容太过真实

---

需求:

1.页面内容不是死的

2.根据后台数据动态加载页面数据

实现:

在这之前我们需要了解下apppend()与html()这两个方法的区别:

简单来说就是append（）方法是在元素列表添加某个元素，但是html（）是替换元素中的数据。如果需要做换页，导航此类的效果最好使用html（）方法

详情可参考:append()与html()区别

废话不多说直接上代码:

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

医疗质量

运营效率

持续发展

满意度

返回

保存

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 !} + “\n” +

" <table class=“content_table”>\n" +

" \n" +

" \n" +

" \n" +

" \n" +

" \n" +

" "

} else {

list += “<div class=“content”>\n” +

" <div class=“ti