• JS的type类型为 text/template


    JS标签中有时候会看见<script type="text/tmplate" >,大概就是一个放置模板的地方,而这些东西并不显示在页面

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

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

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

    复制代码
    <input type="button" id="btn" value="显示我" />
    <script type='text/template' id="demo1">
        <div class="videojs-hero black-background-color">
            <span class="err_message">
                <p style="text-align:left">抱歉×_×播放出错了</p>
                <p></p>
                <p style="text-align:left">1.请检查您的网络并刷新页面重试 </p>
                <p style="text-align:left">2.请检查您的PC机是否没有安装Flash,下次记得要安装哦^_^</p>
            </span>
        </div>
    </script>
    <script>
        function createErrorOverlay(){
            var overlay=document.createElement('div');
            overlay.className='box';
            overlay.innerHTML=document.querySelector('#demo1').innerHTML;
            document.getElementsByTagName('body')[0].appendChild(overlay);
        }
        document.getElementById('btn').onclick= createErrorOverlay;
    </script>
    复制代码
  • 相关阅读:
    P1410 子序列
    P1395 会议 (树形dp)
    P2580 于是他错误的点名开始了
    LC1127. 用户购买平台
    LC 1308. Running Total for Different Genders
    P1340 兽径管理 (最小生成树)
    P1330 封锁阳光大学 (二分图染色)
    CF1296F Berland Beauty (Tree, dfs/bfs, LCA)
    顺丰的Cookie条款
    服务器判断客户端的用户名和密码(token的身份验证)
  • 原文地址:https://www.cnblogs.com/deepalley/p/12743030.html
Copyright © 2020-2023  润新知