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包实现了数据驱动的用于生成文本输出的模 ...
随机推荐
- Evernote相关技术介绍——mysql+lucene+tomcat
Evernote服务 我们的服务由以下几个组件组成. 分片(NoteStore) 分片是Evernote服务的核心单元,用于存储用户的笔记.每个分片最多可以支撑30万个Evernote用户,并包含 ...
- codeforces 686D D. Kay and Snowflake(dfs)
题目链接: D. Kay and Snowflake time limit per test 3 seconds memory limit per test 256 megabytes input s ...
- bzoj 5329 战略游戏
题目大意: 一个无向图 Q个询问 每次给一些点的集合 求有多少个点满足去掉这个点后使这些点的集合中有一个点对不连通 思路: 点双缩点 相当于每次求这些点中的所有路径上的圆点个数 可以将这些点按dfs序 ...
- python ConfigParser模块 配置文件解析
ConfigParser模块主要是用来解析配置文件的模块,像mysql,或者win下面的ini文件等等 下面我们来解析mysql的配置文件my.cnf my.cnf配置文件内容 [mysqld] da ...
- sum=1+2+3+…+100
sum = 1 for i in range(0,101): # sum = sum + i sum += i print(sum) sum +=i 等于 sum = sum + i
- 2.jeesite增删改查
一.准备数据 在数据库中中添加一张表和数据,以mysql为例 SET NAMES utf8; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------- ...
- mysql 里面的isnull()和ifnull() is null 和 is not null
usergrade表 1.找到里面username是null的行 SELECT * FROM usergrade WHERE ISNULL(USERNAME) SELECT * FROM usergr ...
- E20180224-hm-xa
separator n. 分离器,分离装置; 防胀器; colon n. 冒号; <解>结肠; 科郎(哥斯达黎加货币单位); semicolon n. 分号;
- J20170521-ts
組み込み 内置 リダイレクト 重定向 ディスクリプタ 描述符 バッファリング n 缓冲
- 使用node.js在sublime text3搭建服务器
问题描述: 使用node.js在sublime text3中搭建好服务器后,第一次使用“ctrl+b”运行服务器没有问题,如图所示 如果想对test.js中的内容做些许修改,保存后再使用“ctrl+b ...