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. bzoj 4543 HOTEL 加强版

    题目大意: 求树上取三个点这三个点两两距离相等的方案数 思路: 远古时候的$n^2$做法是换根 但那样无法继续优化了 学习了一波长链剖分 考虑如何在一棵树上进行dp 设$f[i][j]$表示以$i$为 ...

  2. BZOJ_3172_[Tjoi2013]单词_AC自动机

    BZOJ_3172_[Tjoi2013]单词_AC自动机 Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. ...

  3. 如何编写linux下nand flash驱动-4

    2.       软件方面 如果想要在Linux下编写Nand Flash驱动,那么就先要搞清楚Linux下,关于此部分的整个框架.弄明白,系统是如何管理你的nand flash的,以及,系统都帮你做 ...

  4. virtualbox安装完系统之后重新启动重新进入安装界面原因

    安装完成之后如果重新启动出现卡死的情况,直接关闭掉virtualbox,然后重新启动. 在这里记得完成安装后再改下设置,把Storage里的IDE控制器设为没有盘片,否则下次启动时又是安装界面.

  5. openpyxl操作excel

    [转] openpyxl库可以读写xlsx格式的文件,对于xls旧格式的文件只能用xlrd读,xlwt写来完成了. python有很多模块都是用来操作excel的,比如xlrd,xlwt,pyExce ...

  6. org.springframework.web.struts.DelegatingActionProxy

    之前也不知道用的是哪个版本的spring jar 包,后来换了之后发现问题出来了, 00:08:00,364 ERROR RequestProcessor:296 - No action instan ...

  7. Bootstrap中的字体图标

    使用 <span class="glyphicon glyphicon-th-large"> XX文字</span>引入字体图标.一般情况下文字放在span ...

  8. Chrome应用商店打不开解决方法

    方法一.谷歌访问助手(推荐) 谷歌访问助手是一款免费的谷歌代理插件,不用配置即可打开Chrome应用商店,而且速度很不错. 1.根据自己使用的浏览器点击对应版本的插件.详细安装都在下面链接中. 下载地 ...

  9. (图论)51NOD 1298 圆与三角形

    给出圆的圆心和半径,以及三角形的三个顶点,问圆同三角形是否相交.相交输出"Yes",否则输出"No".(三角形的面积大于0).     输入 第1行:一个数T, ...

  10. JavaScript 入门案例

    四.  JavaScript 入门案例 在看本节之前,笔者建议您先看 JavaScript 基础篇  https://www.cnblogs.com/IT-LFP/p/10945884.html 1. ...