关于script标签的type为text/template模板的妙用

最新推荐文章于 2024-04-27 10:29:02 发布

menghuanzhiming

最新推荐文章于 2024-04-27 10:29:02 发布

阅读量1.3w

点赞数 3

分类专栏： js mustache 文章标签： js mustache

本文链接：https://blog.csdn.net/menghuanzhiming/article/details/79927863

版权

js 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

mustache

2 篇文章 0 订阅

订阅专栏

在js里面，经常需要使用js往页面中插入html内容。
比如这样：

    var number = 123;
    $('#d').append('<div class="t">'+number+'</div>');

如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。
给<script>设置type="text/template"，标签里面的内容不会被执行，也不会显示在页面上，但是可以在另一个script里面通过获取插入到页面中。这样就把大段的HTML操作从js里面分离开了。

下面是简单实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="application/javascript" src="mustache.js"></script>

    <body>
        <div id="user_info"></div>
    </body>
    <script type="text/tmplate" id="tmplate">
        <div>
            <ul>
                <li>姓名：{{name}}</li>
                <li>年龄：{{age}}</li>
                <li>电话：{{phone}}</li>
            </ul>
        </div>
    </script>

    <script type="application/javascript">
        //实例参数
        var user = { name: "陈立明", age: 23, phone: "15932582632"};
        //模板
        var template = document.getElementById("tmplate").innerHTML;
        //使用mustache.js进行模板解析填充数据
        var view = Mustache.render(template, user);

        document.getElementById("user_info").innerHTML = view;
    </script>
</html>

menghuanzhiming

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
关于script标签的type为text/template模板的妙用

在js里面，经常需要使用js往页面中插入html内容。比如这样： var number = 123; $('#d').append('&lt;div class="t"&gt;'+number+'&lt;/div&gt;');如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十...
复制链接

扫一扫