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

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

var number = ;
$('#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">.请检查您的网络并刷新页面重试 </p>
<p style="text-align:left">.请检查您的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')[].appendChild(overlay);
}
document.getElementById('btn').onclick= createErrorOverlay;
</script>

.

JS的type类型为 text/template的更多相关文章

  1. <script type="text/template">是干什么的,为什么要把html写在js中? 这是什么编程语言风格,都能这样用吗?

    这一段存放了一个模板.在js里面,经常需要使用js往页面中插入html内容.比如这样: var number = 123; $('#d').append('<div class="t& ...

  2. Js script type="text/template"的使用简单说明

    <script type="text/template" id="treeTableTpl"> <tr id="{{row.id}} ...

  3. 关于MVC模板渲染的一点小事type="text/template"

    先上一个demo,简单粗暴,请自便 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  4. 前端模板<script type="text/template" id="tmpl">

    前端模板, 比连接字符串好用多了, 还可以使用循环\判断等语句, 减少工作量 <script type="text/template" id="member-tmp ...

  5. 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件

    https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...

  6. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  7. 现代C++之理解模板类型推断(template type deduction)

    理解模板类型推断(template type deduction) 我们往往不能理解一个复杂的系统是如何运作的,但是却知道这个系统能够做什么.C++的模板类型推断便是如此,把参数传递到模板函数往往能让 ...

  8. JavaScript type="text/template"的用法

    JavaScript type="text/template"相当于定义一个模板,如果没有使用html()方法的话,是显示不出来的,我们直接看例子(我是在tp框架的里面写的) &l ...

  9. go标准库的学习-text/template

    参考:https://studygolang.com/pkgdoc 导入方式: import "text/template" template包实现了数据驱动的用于生成文本输出的模 ...

随机推荐

  1. android 改变状态栏(StatusBar)颜色

    public static void changeColor(Activity paramActivity, int paramInt1) { if (Build.VERSION.SDK_INT &g ...

  2. 如何判断http服务器是否支持range寻址

    如果向支持range寻址的http服务器发带range的请求 ,会有什么结果呢?是否有错误返回?数据怎么下载? 诸葛小炎fire | 浏览 569 次   您的回答被采纳后将获得: 系统奖励20(财富 ...

  3. 06_传智播客iOS视频教程_源文件后缀名和main函数

    OC与C语言的不同. 把OC程序运行起来,CPU只会找main函数.并且只会执行main函数当中的代码.当main函数的代码执行完毕之后这个程序就自动结束掉了. main函数的参数是可以让我们在运行程 ...

  4. MySQL基础 -- 关系代数

    MySQL基础 -- 关系代数 关系代数是一种抽象的查询语言,它用对关系的运算来表达查询.  任何一种运算都是将一定的运算符作用于一定的运算对象上,得到预期的结果.所以运算对象.运算符.运算结果是运算 ...

  5. 【SpringCloud构建微服务系列】使用Spring Cloud Config统一管理服务配置

    一.为什么要统一管理微服务配置 对于传统的单体应用而言,常使用配置文件来管理所有配置,比如SpringBoot的application.yml文件,但是在微服务架构中全部手动修改的话很麻烦而且不易维护 ...

  6. Zoj 1610 Count the Colors (线段树+区间更新+暴力计数)

    题目大意: 有n次操作,每次都是对一根线中的一段区间进行染色(颜色并不相同),有时候后面的颜色有可能覆盖前面的颜色,问最后涂完色,能看到的颜色有几种,每种颜色有几部分? 解题思路: 这个题目建树的时候 ...

  7. 判素数+找规律 BestCoder Round #51 (div.2) 1001 Zball in Tina Town

    题目传送门 /* 题意: 求(n-1)! mod n 数论:没啥意思,打个表能发现规律,但坑点是4时要特判! */ /***************************************** ...

  8. 配置Ubuntu16.04第03步:安装搜狗输入法

    1.进入搜狗官网:https://pinyin.sogou.com/linux/ ,下载搜狗输入法安装包 2.使用dpkg命令安装Deb包: sudo dpkg -i sogoupinyin_2.0. ...

  9. 题解报告:hdu 1235 统计同成绩学生人数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1235 Problem Description 读入N名学生的成绩,将获得某一给定分数的学生人数输出. ...

  10. hdu 5036 Explosion bitset优化floyd

    http://acm.hdu.edu.cn/showproblem.php?pid=5036 题意就是给定一副有向图,现在需要走遍这n个顶点,一开始出发的顶点是这n个之中的随便一个. 如果走了1,那么 ...