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

在前端应用中，经常需要在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);" οnclick=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);" οnclick="delComment('+commentInfo.commentId+','+activityId +');" class="btn btn-white m-r-5"><i class="fa fa-trash-o"></i></a>

         拼装好之后，进行触发的时候，一直没有反应，原因是里面的参数的格式不能识别，需要将其变为字符串形式。正确的拼装形式为：

                    <a href="javascript:void(0);" οnclick=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>';