一、一般方式
方式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);
}