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>';