JavaScript的type属性等于text/html 例子
在使用JavaScript标签<script>的时候，其中type最常用的就是text/javascript
其实这个type还有其他用法，下面直接给出例子：
type属性为text/html的时候，<script>片断中定义一个被JS调用的代码，代码不会在页面上显示
- <script id="commentTemplate" type="text/html">
- <li>
- <div class="photo">
- <a href="#"> <img src="[UserImg]" /></a>
- </div>
- <p>
- <a href="#">[UserName]：</a><span class="time">[CreateDate]</span>
- </p>
- <div class="clear"></div>
- </li>
- </script>
再看上面的代码片段，我们在下面的代码中怎么使用，如下：
- <html>
- <head>
- <title>标题</title>
- </head>
- <body>
- <div id="comment_ul_2"></div>
- <input type="button" id="addFun" value="click me" />
- <script type="text/javascript">
- var reg = new RegExp("([^\[]*?)\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
- $("#addFun").click(function() {
- var html = document.getElementById("commentTemplate").innerHTML;
- var source = html.replace(reg, function(node, key) {
- return {
- 'UserImg' : '1',
- 'UserName' : '张',
- 'CreateDate' : '2011-1-1'
- }[key];
- });
- $("#comment_ul_2").append(source);
- });
- var zzl = "name:[name]";
- zzl = zzl.replace(reg, function(node, key) {
- return {
- 'name' : '小明'
- }[key];
- });
- alert(zzl);
- </script>
- </body>
- </html>
这里解释一下：其中有一个replace，在替换时，可以接受一个json字符串，然后根据json的key来对比js模块里的key，进行赋值！
另外，网上有一些比较好的关于 text/template 模版用法的插件js，也是个很好用的模版技术。
JavaScript的type属性等于text/html 例子的更多相关文章
- 让script的type属性等于text/html
type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate&quo ...
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
- <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)
application/javascript是服务器端处理js文件的mime类型,text/javascript是浏览器处理js的mime类型,后者兼容性更好(虽然application/ ...
- jquery html属性和text属性的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML <input> 标签的 type 属性
HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...
- js修改input的type属性问题
js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...
- input的type属性
input的type属性:http://www.w3school.com.cn/tags/att_input_type.asp 基本语法: <input type="hidden&qu ...
- input表单的type属性详解，不同type不同属性之间区别
目标:详解表单input标签type属性常用的属性值 一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...
- Python：bs4中 string 属性和 text 属性的区别及背后的原理
刚开始接触 bs4 的时候,我也很迷茫,觉得 string 属性和 text 属性是一样的,不明白为什么要分成两个属性. html = '<p>hello world</p>' ...
随机推荐
- 关于ptrdiff_t
整除.opencv中的内存一般是通过malloc分配,不能保证都是都能被16整除,此时需要截断,但是剩下的内存要如何维护? CV2.0的这样维护的:在 malloc 是多申请一个指针的空间,这个指针指 ...
- Ubuntu下配置Apache的Worker模式
其实Apache本身的并发能力是足够强大的,但是Ubuntu默认安装的是Prefork模式下的Apache.所以导致很多人后面盲目的去 安装lighttpd或者nginx一类替代软件.但是这类软件有一 ...
- SP1557 GSS2 - Can you answer these queries II
一开始看不懂题解,看懂了题解之后觉得还是挺妙的. 好多题解里都提到了HH的项链,但是我觉得关系并不大啊…… 先把所有询问离线下来按照右端点排序,按照询问的要求一个一个加入数字,怎么加入数字,我们设计一 ...
- Luogu 1379 八数码难题
吐槽:此题就是一点一点卡过去的 警告: 1.千万不能用dfs搜这种东西(dfs需要遍历所有状态才能找到最优解), 分分钟爆炸 2.写结构体的时候要综合判断&的加和不加 Code: // luo ...
- Yii2视频
Yii2 视频分享 需要的小伙伴看过来链接: https://pan.baidu.com/s/1sl4H0RV 密码: nknx (有问题请留言)
- Entity Framework 6.0 Tutorials（8）：Custom Code-First Conventions
Custom Code-First Conventions: Code-First has a set of default behaviors for the models that are ref ...
- Android不间断上报位置信息-应用进程防杀指南
没用的 除非加入白名单 或者用户自己设置锁屏后不被杀死 不然的话 锁屏5分钟以内app会被杀死,包 括所有的service. 说白了就是定位不要纯依赖gps,很多硬件为了省电,会对熄屏下的模块功能和运 ...
- Portal:Machine learning机器学习：门户
Machine learning Machine learning is a scientific discipline that explores the construction and stud ...
- MySQL性能调优与架构设计——第4章 MySQL安全管理
第4章 MySQL安全管理 前言 对于任何一个企业来说,其数据库系统中所保存数据的安全性无疑是非常重要的,尤其是公司的有些商业数据,可能数据就是公司的根本,失去了数据的安全性,可能就是失去了公司的一切 ...
- Android Activity的切换动画(overridePendingTransition)
overridePendingTransition 1.平时Activity的切换是就是从中间弹出来,然后遮盖住之前的Activity.这种效果看到很多后就想给他换成其他的效果,如: 要显示的Acit ...