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>
更多推荐
使用script标签来做html页面的模板
发布评论