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包实现了数据驱动的用于生成文本输出的模 ...
随机推荐
- Mac 中安装 Apache Ant
1.下载Apache Ant:http://ant.apache.org/bindownload.cgi 2.解压apache-ant-1.9.6-bin.zip,把解压好的apache-ant-1. ...
- codeforces 688E E. The Values You Can Make(dp)
题目链接: E. The Values You Can Make time limit per test 2 seconds memory limit per test 256 megabytes i ...
- I.MX6 i2c_data_write_byte ioctl error: I/O error
/************************************************************************* * I.MX6 i2c_data_write_by ...
- sqlite支持linq
A small library to easily access SQLite databases from .NET/Mono/MonoTouch applications In order to ...
- 07_传智播客iOS视频教程_#import指令
mac切换中英文输入法默认是Ctrl+空格键. 预处理指令的执行时机是在编译之前.在编译之前执行预处理指令. #import指令是包含文件,将指定的文件的内容在预编译的时候拷贝到写指令的地方. #im ...
- CodeForces 723B Text Document Analysis (水题模拟)
题意:给定一行字符串,让你统计在括号外最长的单词和在括号内的单词数. 析:直接模拟,注意一下在左右括号的时候有没有单词.碰到下划线或者括号表示单词结束了. 代码如下: #pragma comment( ...
- MySQL之不得不说的keepsync和trysync
此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 开宗明义,keepsync和trysync是网易MySQL分支版本InnoSQL的两个参数,非常重要的两个参 ...
- Douglas-Peucker 轨迹压缩算法
算法的基本思路是: 对每一条曲线的首末点虚连一条直线,求所有点与直线的距离,并找出最大距离值dmax ,用dmax与限差D相比: 若dmax <D,这条曲线上的中间点全部舍去; ...
- bzoj 4816: [Sdoi2017]数字表格【莫比乌斯反演+逆元】
把题意简化,就是要求 \[ \prod_{d=1}^{min(n,m)}f[d]^{\sum_{i=1}^{n}\sum_{j=1}^{m}e[gcd(i,j)==d]} \] 把幂用莫比乌斯反演转化 ...
- CF896C Willem, Chtholly and Seniorious(珂朵莉树)
中文题面 珂朵莉树的板子……这篇文章很不错 据说还有奈芙莲树和瑟尼欧里斯树…… 等联赛考完去学一下(逃 //minamoto #include<bits/stdc++.h> #define ...