js模板引擎实例一
2021-05-22 11:29
标签:模板 www. html inner style tor 模板引擎 tle 引擎 js模板引擎实例一 标签:模板 www. html inner style tor 模板引擎 tle 引擎 原文地址:http://www.cnblogs.com/caoruichun/p/7691789.html div class="header">div>
script type="template" id="template">
h2>
a href="{{href}}">{{Title}}/a>
/h2>
img src="{{imgSrc}}" width="300">
script>
// 数据
var data = [{
Title: "百度一下",
href: "http://www.baidu.com",
imgSrc: "1.jpg"
}];
var template = document.querySelector(‘#template‘).innerHTML,
header = document.querySelector(‘.header‘),
fragment = ‘‘;
for (var i = 0, len = data.length; i ) {
fragment += template
.replace(/\{\{Title\}\}/, data[i].Title)
.replace(/\{\{href\}\}/, data[i].href)
.replace(/\{\{imgSrc\}\}/, data[i].imgSrc)
}
header.innerHTML=fragment;
上一篇:前端知识学习(HTML)
下一篇:jQuery记忆巩固