如何在 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);
                        }