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. DOM方式解析xml实例2

    老样子,javabean实体类: import java.io.*; public class Book implements Serializable { private int id; priva ...

  2. net share

    IT知识梳理 2017-11-30 06:57:10 Dos 命令进阶(一)讲解思路 1.Net常用命令 (1)net share - 查看共享命令 net share ipc$ - 设置ipc$共享 ...

  3. Application 效能分析有妙招 — 使用 perf 走天下(转载)

    转载:http://tech.mozilla.com.tw/posts/1803/application-%E6%95%88%E8%83%BD%E5%88%86%E6%9E%90-%E4%BD%BF% ...

  4. 不让浏览器缓存input的值

    方法一: 在不想使用缓存的input中添加 autocomplete="off"eg: <input type="text" autocomplete=& ...

  5. 洛谷 P4013 数字梯形问题【最大费用最大流】

    第一问:因为每个点只能经过一次,所以拆点限制流量,建(i,i',1,val[i]),然后s向第一行建(s,i,1,0),表示每个点只能出发一次,然后最后一行连向汇点(i',t,1,0),跑最大费用最大 ...

  6. 洛谷 P2766 最长不下降子序列问【dp+最大流】

    死于开小数组的WA?! 第一问n方dp瞎搞一下就成,f[i]记录以i结尾的最长不下降子序列.记答案为mx 第二问网络流,拆点限制流量,s向所有f[i]为1的点建(s,i,1),所有f[i]为mx(i+ ...

  7. Luogu P2735 电网【真·计算几何/Pick定理】By cellur925

    题目传送门 刷USACO偶然遇到的,可能是人生中第一道正儿八经的计算几何. 题目大意:在平面直角坐标系中给你一个以格点为顶点的三角形,求三角形中的整点个数. 因为必修5和必修2的阴影很快就想到了数学中 ...

  8. Linux下GCC编译器的安装

    通过apt-get方式下载的Qt5.9的gcc编译器版本只是4.8.3,无法打开一些Qt5的库头文件,所以准备在Llinux下再安装一个gcc5.3.0. 查看gcc版本 ubuntu下查看gcc的版 ...

  9. poj 3281 Dining (最大网络流)

    题目链接: http://poj.org/problem?id=3281 题目大意: 有n头牛,f种食物,d种饮料,第i头牛喜欢fi种食物和di种饮料,每种食物或者饮料被一头牛选中后,就不能被其他的牛 ...

  10. 水题 Codeforces Round #306 (Div. 2) A. Two Substrings

    题目传送门 /* 水题:遍历一边先找AB,再BA,再遍历一边先找BA,再AB,两种情况满足一种就YES */ #include <cstdio> #include <iostream ...