博主原創：未經博主允許，不得轉載
在前端應用中，經常需要在js中動態拼接HTML頁面，比如應用ajax進行局部刷新的時候，就需要在js中拼接HTML頁面。
主要規則是將HTML頁面的標簽拼接為標簽字符創，要特別注意的是標簽中的變量或數值。
舉例如下：
<div class="tab-content" id="summaryContent" style="padding: 0px 15px;"></div>
在上述的div中拼接頁面。拼接頁面的內容如下：
function loadComment(){
$.ajax({
url:'<%=basePath%>actManage/getSummaryStatics',
type:'POST',
data:{"activityId":"${actInfo.activityId}"},
dataType:'json',
success:function(data){
//拼接列表頁面
var tableContent = "";
var commentCount = data.commentCount;
var askCount = data.askCount;
var voicingCount = data.voicingCount;
tableContent += '<div class="tab-pane fade active in" id="nav-pills-tab-1" style="height:48%;overflow-y:auto">';
tableContent += '<table class="table table-hover" style="margin: 0px">';
if(commentCount>0){
$.each(data.commentList,function(i){
var commentInfo = data.commentList[i];
var num = i+1;
var commentId = commentInfo.commentId;
var activityId ='${actInfo.activityId }';
tableContent += '<tr style="border-bottom: 1px solid #e2e7eb; word-wrap:break-word;word-break:break-all;">';
tableContent += '<td ><span class="badge badge-info">'+num+'</span></td>';
tableContent += '<td ><a href="javascript:void(0);" onclick=delComment("'+commentInfo.commentId+'","'+activityId +'") class="btn btn-white m-r-5"><i class="fa fa-trash-o"></i></a></td>';
tableContent += '<td >'+commentInfo.content +'</td>';
tableContent += '</tr>';
})
}else{
tableContent += '<div style="text-align:center;vertical-align：middle;padding-top:80px;font-size:24px;">暫無評論</div> ';
}
tableContent += '</table>';
tableContent += '</div>';
//將拼接的頁面放入列表里面
$("#summaryContent").html(tableContent);
}，
error:function(){
var tableContent = " ";
tableContent += '<div class="tab-pane fade active in" id="nav-pills-tab-1" style="height:48%;overflow-y:auto">';
tableContent += '<table class="table table-hover" style="margin: 0px">';
tableContent += '<div style="text-align:center;vertical-align：middle;padding-top:80px;font-size:24px;">暫無評論</div> ';
tableContent += '</table>';
tableContent += '</div>';
//將拼接的頁面放入列表里面
$("#summaryContent").html(tableContent);
}
注意事項：
1.在HTML頁面中拼接時，需要特別注意含有事件的拼接以及拼接事件中的參數形式。
本人親自經歷：在剛開始拼接時，拼接的形式為：
<a href="javascript:void(0);" onclick="delComment('+commentInfo.commentId+','+activityId +');" class="btn btn-white m-r-5"><i class="fa fa-trash-o"></i></a>
拼裝好之后，進行觸發的時候，一直沒有反應，原因是里面的參數的格式不能識別，需要將其變為字符串形式。正確的拼裝形式為：
<a href="javascript:void(0);" onclick=delComment("'+commentInfo.commentId+'","'+activityId +'") class="btn btn-white m-r-5"><i class="fa fa-trash-o"></i></a>
拼裝好之后，點擊進行觸發就可識別。
2.當拼裝的HTML里面需要獲取后台中的值時，也可以用jQuery的形式獲取：${userId}。
不過在拼裝的時候，盡量先將他獲取出來，然后再拼裝頁面的時候，直接使用就好了，避免出錯的幾率。
3.標簽中間的文本中變量的使用拼接方式：
tableContent += '<td ><span class="badge badge-info">'+num+'</span></td>';