<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 < len; i++) { fragment += template .replace(/{{Title}}/, data[i].Title) .replace(/{{href}}/, data[i].href) .replace(/{{imgSrc}}/, data[i].imgSrc) } header.innerHTML=fragment;