javascript拼接html代碼

經常做jsp開發的朋友可能遇到一個情況，顯示列表數據不是table，而是div或者其他很多標簽做的一種更漂亮的樣式列表。如果采用ajax更新列表數據，可能有些朋友采用“html代碼拼接”的方式，比如："<a>"+json.name+"</a>"這樣的方法。
下面我提供一個思路，可以不需要拼接html代碼，並且適用任何復雜的列表。

代碼說明：
1. 適用於ajax獲取數據然后需要通過拼接html代碼的方式實現數據列表展現的需求/功能
2. html模板最好有一個父元素, 因為最后clone的模板都是插入在父元素內部后面
3. 代碼中最關鍵的部分當然是js的實現. 理解js部分主要是clone、each、append、replace這幾個方法的理解和應用​
​1. [代碼]html代碼示例     
<div class="modal-body" >
<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#" alt="">
</label>
</a>
<p ><input id="#id#" type="checkbox" value="#id#" >#name#</p>
</li>
<!--
數據為空的時候顯示的提醒信息. 不是必須.
需要的朋友主要是了解下javascript部分關鍵代碼實現思路就可以了,
了解后隨便怎么寫都OK...
-->
<li class="span1" id='template_nodata' style='display: none;'>
吖! 人呢? (沒有可供選擇的用戶)
</li>
</ul>
</div>
2. [代碼]js實現模板復制和數據填充     
function demo() {
$.post('${pageContext.request.contextPath}/demo/getData.htm', function(data) {
if(data.list.length > 0) {http://www.huiyi8.com/css3/​
var hasHandler = typeof(valHandler) == 'function'; // 是否有定義val額外處理的函數
var template = $('#template');

// 循環json格式對象
$.each(data.list, function(i, obj) {
// 克隆當前數據模板, 清除id, 設置顯示
// jQuery也有removeAttr()方法可以清除id, 看個人習慣
// 之所以清除id, 是為了保持id的唯一性, 並且模板id不能重復
// clone(true)是把事件一起clone
var temp = template.clone(true).attr('id', '').show();
var html = temp.html(), regx; // 取模板里的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#占位符替換成''
});css3動畫

// 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;
}