博主原创：未经博主允许，不得转载

在前端应用中，经常需要在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>\';