使用script标签来做html页面的模板

来源：互联网发布：mac修容粉香港价格编辑：程序博客网时间：2024/05/16 07:26

html页面经常需要js动态加载html内容，一般都采取js拼接html 的方式实现，最近发现可以使用<script>标签来做个html模板，这样更方便。并且代码可读性也增强了。

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><!--<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black">--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>script html模板</title><style>* {font-family: Arial "微软雅黑";}#addBtn{background-color: #fff;display: block;padding:3px 20px;border:1px solid #E0E0E0;color:#888;border-radius: 10px;}.list {border:1px solid pink;padding:10px}p{color: goldenrod;}</style></head><body><input type="button" value="clickMe" id="addBtn"/><div class="list"></div><script src="js/zepto.min.js"></script><script type="text/html" id="temp"><div class="item"><p>[title]</p><p>[dateA]</p></div></script><script type="text/javascript">$(function(){$("#addBtn").click(function(){console.log("sadff");var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。var html = document.getElementById("temp").innerHTML;for(var i=0;i<10;i++){var source = html.replace(reg, function(node, key) {                  return {                      'title' : '我是hbuilder啊，哈哈哈哈',                     'dateA' : '2016-09-19'                }[key];              });              $(".list").append(source);}});});</script></body></html>

1 0