HTML/JS转换工具
Unicode编码转换
当前位置:首页 > WEB前端 > JavaScript > 

JavaScript拼接html代码功能

来源:IT技术网编辑:雨天发布于:2017-02-12人围观

JavaScript如何拼接html代码?下面IT技术网给大家提供一个思路,可以不需要拼接html代码,并且适用任何复杂的列表。

代码说明:
1. 适用于ajax获取数据然后需要通过拼接html代码的方式实现数据列表展现的需求/功能
2. html模板最好有一个父元素, 因为最后clone的模板都是插入在父元素内部后面
3. 代码中最关键的部分当然是js的实现. 理解js部分主要是clone、each、append、replace这几个方法的理解和应用

 

<div class="modal-body" style="height: 300px; overflow: auto">
<ul class="thumbnails" >
<!-- 
注意id='template' 
这里定义一个数据模板. id为template
然后里面需要显示值的地方用#key#的形式占位, 可以出现多次. key与json返回的对象的name保持一致.
刚开始编写模板的时候, 可以不设置 display: none; 方便查看模板样式.
测试的时候, 设置目标 display: none;
-->
<li class="span1" id='template' style='display: none;'>
<a href="javascript:;" class="thumbnail">
<label for="#id#">
<img src="${pageContext.request.contextPath }/resource/image/#logo#" style="white-space: pre;"> // 取模板里的html字符串; 定义正则变量
 
// obj为json中的对象; key对应json对象的属性, val就是json的val值
$.each(obj, function(key, val) {
if(hasHandler) {
// 对'指定属性'的value进行特殊处理, 如value为空需指定默认值
val = valHandler(key, val);
}
 
// 动态创建正则
// 例如:#name#/g 替换所有 #name#
regx = new RegExp('#'+key+'#', 'g');
html = html.replace(regx, val || ''); // 将占位符替换成实际值, 如果 val为null, 将原有的#name#占位符替换成''
});
 
// temp.html(html)是把html字符有替换回去
// 然后追加到目标的父容器的后面
template.parent().append(temp.html(html));
}); // $.each
}
else {
$('#template_nodata').show();
}
}); // ajax获取数据
}
 
// valHandler必须定义, 
// 如果不定义, 上述代码var hasHandler = typeof(valHandler) == 'function';部分会报错为定义对象
// 该函数的意义是针对需要二次处理的字段进行处理
function valHandler(key, val) {
if(key == 'logo' && !val) {
// 如果logo为空, 路径改成默认logo路径
val = 'defaultLogo.png';
}
return val;
}
织梦二维码生成器

与相关的文章
有时间的话来看看IT界的突发事件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片