JS的type类型为 text/template
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的更多相关文章
- <script type="text/template">是干什么的,为什么要把html写在js中? 这是什么编程语言风格,都能这样用吗?
这一段存放了一个模板.在js里面,经常需要使用js往页面中插入html内容.比如这样: var number = 123; $('#d').append('<div class="t& ...
- Js script type="text/template"的使用简单说明
<script type="text/template" id="treeTableTpl"> <tr id="{{row.id}} ...
- 关于MVC模板渲染的一点小事type="text/template"
先上一个demo,简单粗暴,请自便 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- 前端模板<script type="text/template" id="tmpl">
前端模板, 比连接字符串好用多了, 还可以使用循环\判断等语句, 减少工作量 <script type="text/template" id="member-tmp ...
- 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件
https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
- 现代C++之理解模板类型推断(template type deduction)
理解模板类型推断(template type deduction) 我们往往不能理解一个复杂的系统是如何运作的,但是却知道这个系统能够做什么.C++的模板类型推断便是如此,把参数传递到模板函数往往能让 ...
- JavaScript type="text/template"的用法
JavaScript type="text/template"相当于定义一个模板,如果没有使用html()方法的话,是显示不出来的,我们直接看例子(我是在tp框架的里面写的) &l ...
- go标准库的学习-text/template
参考:https://studygolang.com/pkgdoc 导入方式: import "text/template" template包实现了数据驱动的用于生成文本输出的模 ...
随机推荐
- lucene 索引文件大小分布_tim
Hi, I have index ~31G where27% of the index size is .fdt files (8.5G)20% - .fdx files (6.2G)37% - .f ...
- gerrit使用总结
1. 前言 最近在摸索git + gerrit代码审核的工作模式,需要安装gerrit服务器,经过一阵折腾,走了不少弯路,在此做下笔记,以便自己或者他人参考.有误的地方请指教. 我的环境如下: 环境 ...
- C# a标签请求下载文件
服务器文件后台处理方式: a标签: <a href="/FileUpload/DownloadFile?file=/UploadFiles/File/bfcd676b-13a8-419 ...
- tyvj 1666 城市建设【最小生成树】
-Wall是个好东西,要不然我至死都看不出来我把(b[i]+b[j])写成了(b[i],b[j])-- 还是来自lyd的题解: (其实原来课件第一行式子写错了没有-1,然而我用sai手画了一个上去hh ...
- bzoj 3159: 决战【LCT】
只是想复健一下LCT没想到做了不得了的题--调了两天QAQ 题解是这么说的: 但是果然还不太理解--因为swap的前后问题调了好久,(所以一开始养成的习惯后面就不要再改啦-- 总之大概就是把对位置lc ...
- bzoj 4826: [Hnoi2017]影魔【单调栈+树状数组+扫描线】
参考:https://www.cnblogs.com/lcf-2000/p/6789680.html 这是一个相对码量少的做法,用到了区间修改区间查询的树状数组,详见:www.cnblogs.com/ ...
- 关于python安装lxml插件的问题
文章只是介绍自己安装时从安装不上到安装后报错,再到安装成功的心路历程,并不代表广大欧皇也会会出现同类型的问题,也不是总结和汇总各种出问题的原因. 直接进入正题,首先我这边是win环境,电脑上装的是py ...
- [SRM613~] TaroCheckers
一定要注意Topcoder的提交机制 Links: 原题地址 Vjudge Solution 这道题思维比较巧妙. 一看就基本知道是一个Dp题. 首先转换一下,用列而不是行来设第一维的状态,因为每列只 ...
- [Usaco2003 Open]Lost Cows
Description N (2 <= N <= 8,000) cows have unique brands in the range 1..N. In a spectacular di ...
- [ZPG TEST 110] 多边形个数【DP】
1. 多边形个数 (polygons.pas/c/cpp) [问题描述] 给定N线段,编号1到n.并给出这些线段的长度,用这些线段组成一个K边形,并且每个线段做多使用一次.若使用了一条不同编号的线段, ...