＜script type=“text/html“＞是怎么回事？

m_cy

于 2022-08-03 23:45:45 发布

阅读量2k

点赞数

分类专栏：前端哪些事文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_46918406/article/details/126151050

版权

前端哪些事专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该博客介绍了一个JavaScript示例，展示了如何在HTML中定义一个模板，并在按钮点击事件中将其内容追加到页面指定位置。同时，使用正则表达式和JSON对象实现模板变量的替换，动态生成带有个性化信息的评论条目。

摘要由CSDN通过智能技术生成

1.问题描述

可以在 ”script“ 片断中定义一个被JS调用的代码，但代码又不在页面上显示。

2.代码示例

<html>
<head>
<title>标题</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
    <div id="comment_ul_2"></div>
    <input type="button" id="addFun" value="click me" />
	<script id="commentTemplate" type="text/html">
		<li>
			<div class="photo">
				图片<a href="#"> <img src="[UserImg]" /></a>
			</div>
			<p>
				姓名<a href="#">[UserName]：</a>时间<span class="time">[CreateDate]</span>
			</p>
			<div class="clear"></div>
		</li>
	</script>
	
    <script type="text/javascript">
        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');//i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
        $("#addFun").click(function() {
            var html = document.getElementById("commentTemplate").innerHTML;
            // var source = html.replace(reg, function(node, key) {
            //     return {
            //         'UserImg' : '1',
            //         'UserName' : '张',
            //         'CreateDate' : '2011-1-1'
            //     }[key];
            // });
            $("#comment_ul_2").append(html);
        });
        var zzl = "name:[name]";
        zzl = zzl.replace(reg, function(node, key) {
            return {
                'name' : '小明'
            }[key];
        });
        alert(zzl);
    </script>
</body>
</html>