在js里面,经常需要使用js往页面中插入html内容。
比如这样:
var number = 123;
$('#d').append('<div class="t">'+number+'</div>');
如果html很短还好说,但是遇到描述里面的这么大段,直接用字符串存储会很困难,因为不光要处理单引号,还需要很多「+」号把字符串一个个连接起来,十分的不方便。
给<script>
设置type="text/template"
,标签里面的内容不会被执行,也不会显示在页面上,但是可以在另一个script里面通过获取插入到页面中。这样就把大段的HTML操作从js里面分离开了。
下面是简单实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="application/javascript" src="mustache.js"></script>
<body>
<div id="user_info"></div>
</body>
<script type="text/tmplate" id="tmplate">
<div>
<ul>
<li>姓名:{{name}}</li>
<li>年龄:{{age}}</li>
<li>电话:{{phone}}</li>
</ul>
</div>
</script>
<script type="application/javascript">
//实例参数
var user = { name: "陈立明", age: 23, phone: "15932582632"};
//模板
var template = document.getElementById("tmplate").innerHTML;
//使用mustache.js进行模板解析填充数据
var view = Mustache.render(template, user);
document.getElementById("user_info").innerHTML = view;
</script>
</html>
出处:https://blog.csdn.net/menghuanzhiming/article/details/79927863