操作dom用字符串拼接很费劲是吧。来看看art-template吧。
地址：https://aui.github.io/art-template/zh-cn/index.html
使用：https://www.awesomes.cn/repo/aui/arttemplate
转自：https://github.com/aui/art-template
基本渲染
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../../lib/template-web.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
{{/if}}
{{$data}}
</script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../../lib/template-web.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<% if (isAdmin) { %>
<h1><%=title%></h1>
<ul>
<% for (var i = 0; i < list.length; i ++) { %>
<li>索引 <%= i + 1 %> ：<%= list[i] %></li>
<% } %>
</ul>
<% } %>
data: <%=$data%>
</script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
捕获错误
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>debug-demo</title>
<script src="../../lib/template-web.js"></script>
</head>
<body>
<h1>错误捕获（请打开控制台）</h1>
<script id="test" type="text/html">
{{2 a ba d}}
</script>
<script>
var html = '';
html = template('test', {});
document.write(html);
</script>
</body>
</html>
存放模板
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>compile-demo</title>
<script src="../../lib/template-web.js"></script>
</head>
<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
var source = '<ul>'
+ '{{each list value i}}'
+ '<li>索引 {{i + 1}} ：{{value}}</li>'
+ '{{/each}}'
+ '</ul>';
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
嵌入子模板
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../../lib/template-web.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
</script>
<script id="list" type="text/html">
<ul>
{{each list value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
转义
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>no escape-demo</title>
<script src="../../lib/template-web.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<p>不转义：{{#value}}</p>
<p>默认转义： {{value}}</p>
</script>
<script>
var data = {
value: '<span style="color:#F00">hello world!</span>'
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
输出
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>print-demo</title>
<script src="../../lib/template-web.js"></script>
</head>
<body>
<h1>print</h1>
<script id="test" type="text/html">
{{print a b c}} //中间要有空格
</script>
<script>
var html = '';
var data = {
a: 'hello',
b: '--world',
c: '--!!!'
};
html = template('test', data);
document.write(html);
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>print-demo</title>
<script src="../../lib/template-web.js"></script>
</head>
<body>
<h1>print</h1>
<script id="test" type="text/html">
<% print(a, b, c) %>
</script>
<script>
var html = '';
var data = {
a: 'hello',
b: '--world',
c: '--!!!'
};
html = template('test', data);
document.write(html);
</script>
</body>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)