【jQuery】js拼接html-简单粗暴

前言

在项目中有时候需要通过js拼接html，并把结果渲染到某个div中，下面是简单粗暴的方法，记录一下

示例

  <script>
     
      $(function () {
         
          //json字符串，具体操作可参考https://blog.csdn.net/liuzhenhe1988/article/details/115179872
          var dataListJson = '<%=dataListJson%>'; 
          var cssSuffixes = "<%=cssSuffixes%>";//字符串
          var imageWidthAndHeight = "<%=imageWidthAndHeight%>";//600*300
          var imageWidth = imageWidthAndHeight.split('*')[0];
          var imageHeight = imageWidthAndHeight.split('*')[1];
          var moreAddressesUrl = "<%=moreAddressesUrl%>";//字符串
          var isHideStr = "<%=isHideStr%>";
          var jsonObj = $.parseJSON(dataListJson);//json字符串转换为json对象
          var html = RenderNewsHtml();//通过js拼接html
          console.log(html);
          $("#picSliderDiv<%=this.ClientID%>").html(html);
          console.log("<%=this.ClientID%>");
          $('#focus<%=this.ClientID%>').slideFocus();

          function RenderNewsHtml() {
              var html = '';
              html += "<div id='focus<%=this.ClientID%>' class='x-hdpxw " + cssSuffixes + "' style='WIDTH:" + imageWidth + "px;HEIGHT:" + imageHeight + "px;'>";
               html += "<ul style='height:" + imageHeight + "px'> ";
               for (var i = 0; i < jsonObj.length; i++) {
                   html += "<li  style = 'width:" + imageWidth + "px;height:" + imageHeight + "px;'>";
                   html += "<a href='#' target='_blank'>";
                   html += "<img src='" + jsonObj[i].ImageUrl + "' width='" + imageWidth + "px' height='" + imageHeight + "px'> </a>";
                   html += "<a href='#' target='_blank'" + isHideStr + ">";
                   html += "<div class='x_tl1' style='width:" + imageWidth + "px'></div>";
                   html += "</a >";
                   html += "<p" + isHideStr + ">";
                   html += "<a></a>";
                   html += "<a href='#' target='_blank' title='" + jsonObj[i].Title + "'>" + jsonObj[i].Title + "</a >";
                   html += "</p>";
                   html += "</li>";
               }
               html += "</ul>";
               html += "<a href='" + moreAddressesUrl + "' target='_blank'>";
               html += "<div class='x-hdpxw-gu " + cssSuffixes + "'></div>";
               html += "</a>";
               html += "</div>";
               return html;
           }
      });

     
  </script>

<div id="picSliderDiv<%=this.ClientID%>">
</div>