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