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

最新推荐文章于 2024-06-04 13:04:19 发布

、不知不觉、

最新推荐文章于 2024-06-04 13:04:19 发布

阅读量1.1w

点赞数 2

分类专栏： javascript 文章标签： JavaScript script标签生成模板

本文链接：https://blog.csdn.net/u010394015/article/details/52584589

版权

javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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>

、不知不觉、

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
使用script标签来做html页面的模板

html页面经常需要js动态加载html内容，一般都采取js拼接html 的方式实现，最近发现可以使用标签来做个html模板，这样更方便。并且代码可读性也增强了。 --> script html模板 * { font-family: Arial "微软雅黑"; } #addBtn{ background-color: #ff
复制链接

扫一扫

专栏目录