当<script>中的type等于text/html时，我们可以做很多事件！-优快云博客

本文介绍了一种利用<script>标签的type属性设置为text/html，结合正则表达式和JSON数据，实现动态生成HTML内容的方法。通过点击按钮，将预定义的HTML模板中的变量替换为具体值，再追加到页面指定元素中，实现了评论等动态内容的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

当<script>中的type等于text/html时，我们可以做很多事件！

我们可以在<script>片断中定义一个被JS调用的代码，但代码又不在页面上显示，这时，我们可以使用下面的方法：

<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>

<div id="comment_ul_2"></div>
<input type="button" id="addFun" value="click me" />
<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': 'zhang', 'CreateDate': '2011-1-1'}[key]; });
        $("#comment_ul_2").append(source);
    });
    var zzl = "name:[name]";
    zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占'}[key]; });
    alert(zzl);
</script>

OK，这个意思是说，当你单击按钮时，可以把commentTemplate的内容追到comment_ul_2里，这很有意思吧，呵呵！

而其中有一个replace，也很有意思，向在替换时，可以接受一个json字符串，然后根据json的key来对比js模块里的key，进行赋值！

真的很有意思！

转载于:https://my.oschina.net/neumeng/blog/2120048