js中拼接HTML方式方法及注意事项
博主原创：未经博主允许，不得转载
在前端应用中，经常需要在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>';
