如何在 JS 中嵌入大量 HTML 代码 --更新2017-10-10 16:37:09

一、一般方式

方式1：\   要写在标签后面，看例子

var longString = "\
------------------------\
------------------------\
...
------------------------\
";

var toast;
    toast = \'\
                 <div id="toast" style="display:none;">\
                    <div class="weui_mask_transparent"></div>\
                    <div class="weui_toast">\
                       <i class="weui_icon_toast"></i>\
                       <p class="weui_toast_content">\' + msg + \'</p>\
                    </div>\
                 </div>\
        \';
        $(\'\').append(toast);

方式2：+ 要看清楚哪些地方加双引号和单引号
var longString = \'------------------------\' +
                 \'------------------------\' +
                 ...
                 \'------------------------\';

for (var x in imgstrs)  {
 var $preview = $(\'<div class="col-xs-2 col-md-2">\'
  +\'<a href="#" class="thumbnail"> <img id="tuNO\'+x
  +\'"+ src="/images/\'+imgstrs[x]
  +\'" width="55px" height="55px"></img></a></div>\');
  $(\'#crudmodal_modify #show_images\').append($preview);  }

方式3：String.concat
\'\'.concat(
  \'-----------------------------\',
  \'-----------------------------\',
  ...
  \'-----------------------------\',
);
方式4：Array.join
[
  \'-----------------------------\',
  \'-----------------------------\',
  ...
  \'-----------------------------\',
].join(\'\');

二 、无法将js中的数据 动态加上去。 如你想拼接  src="/images/"+imgstrs[x]  这样在html语法是错误的。《==这句话是错误的，之前本人理解不深

   如果你看懂了，动态数据都可以通过方式1 和2  拼接。

三、通过模板

例子1、

<script type="text/template" id="html_template">
<div>HTML代码</div>
</script>

<script type="text/javascript">
var html = document.getElementById(\'html_template\').innerHTML;</script>
这种方式的好处就是可以保持代码缩进，易读易修改，、

 例子2、  ===来自个人 vue中添加的模板 

<!-- 首页模版 -->
  <script id="home_tmpl" type="text/v-template">
    <img src="assets/img/home.png" alt="" width="100%">
  </script>
  <!-- 列表模版 -->
  <script id="list_tmpl" type="text/v-template">
    <!-- 这里的内容不会显示到界面上 -->
    <div class="list">
      <ol>
        <li v-for="item in list">
          <a v-link="{ name: \'item\', params: { id: item.id } }">
            <span class="num">{{pad(item.id, 3)}}</span>
            <div class="info">
              <h3 class="title">{{item.name}}</h3>
              <span class="artist">{{item.artist}}</span>
            </div>
            <span class="duration">{{convert(item.duration)}}</span>
            <div class="photo"><img :src="item.poster" alt="{{item.artist}}"></div>
          </a>
        </li>
      </ol>
    </div>
  </script>

  通过这样取出

  var loadTemplate = function (name) {
    return document.getElementById(name + \'_tmpl\').innerHTML
  }

 四、拓展，js添加节点和 jq添加节点对比

 例子1、被注释掉的就是js代码

  $(function () {
//    var box = document.getElementById("box");
//
//    var a = document.createElement("a");
//    box.appendChild(a);
//    a.setAttribute("href", "http://web.itcast.cn");
//    a.setAttribute("target", "_blank");
//    a.innerHTML = "传智大前端";
    
    $("#box").append(\'<a href="http://web.itcast.cn" target="_blank">传智大前端</a>\');
    
  });

例子2、为了添加成下面子节点，被屏蔽的是js代码，可以看出js比较麻烦

<tr >
　　<td style="text-align: center;">序号</td>
　　<td style="text-align: center;">内容</td>
　　<td style="text-align: center;">价格</td>
</tr>

// 处理改装列表 子表格
                        var gaizhuangxinxi, gaizhuangxinxi_tr, gaizhuangxinxi_id_td, gaizhuangxinxi_content_td, gaizhuangxinxi_price_td;
                        var gaizhuangxinxislen = data.data.gaiZhuangXinXis.length;
                        $(\'#gaizhuangxinxi_list input\')
                        $(\'#gaizhuangxinxi_list\').empty();
                        
//                        for (var i = 0; i < gaizhuangxinxislen; i++) {
//                            gaizhuangxinxi = data.data.gaiZhuangXinXis[i];
//                            gaizhuangxinxi_tr = document.createElement("tr");
//                            gaizhuangxinxi_id_td = document.createElement("td");
//                            gaizhuangxinxi_content_td = document
//                                    .createElement("td");
//                            gaizhuangxinxi_price_td = document
//                                    .createElement("td");
//                            gaizhuangxinxi_tr.appendChild(gaizhuangxinxi_id_td);
//                            gaizhuangxinxi_tr
//                                    .appendChild(gaizhuangxinxi_content_td);
//                            gaizhuangxinxi_tr
//                                    .appendChild(gaizhuangxinxi_price_td);
//                            gaizhuangxinxi_id_td.innerHTML = gaizhuangxinxi.id;
//                            gaizhuangxinxi_content_td.innerHTML = gaizhuangxinxi.gaiZhuangLeiXing;
//                            gaizhuangxinxi_price_td.innerHTML = gaizhuangxinxi.danJia;
//                            $(\'#gaizhuangxinxi_list\').append(gaizhuangxinxi_tr);
//                        }
                        for (var i = 0; i < gaizhuangxinxislen; i++) {
                            gaizhuangxinxi = data.data.gaiZhuangXinXis[i];
                            gaizhuangxinxi_tr =$(\'<tr> <td style="text-align: center">\'+gaizhuangxinxi.id
                                    +\'</td><td style="text-align: center">\'+gaizhuangxinxi.gaiZhuangLeiXing
                                    +\'</td><td style="text-align: center">\'
                                    +gaizhuangxinxi.danJia+\'</td></tr>\');
                            $(\'#gaizhuangxinxi_list\').append(gaizhuangxinxi_tr);
                        }