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>' ...
随机推荐
- Linux 下五款出色的流媒体客户端
数 字流媒体这几天几乎占据了我音乐收听的全部时间.近年来我为了收藏 CD 花费了数量可观的费用:但它们中的大部分现在正静静地躺在满是灰尘的角落里.基本上所有的音乐流媒体服务所提供的的音质都不如 CD ...
- 3.Strings 字符串如何工作？----对缓冲区的理解。
修改Hello World程序向特定的人问好. #include <iostream> #include <string> int main() { std::string n ...
- lnmp+laravel部署到服务器出现 "GET / HTTP/1.1" 500 5
lnmp一键安装包直接下载安装,就可以了,在此不多说. 虚拟机配置给个参考(lnmp安装包) server { listen 80; #listen [::]:80; server_name www. ...
- canvas基础学习笔记
canvas基本用法 1.什么是canvas(画布) <canvas> 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形,例如,它可以用于绘制图形,创建动 ...
- 实践作业3:接到任务及思考DAY1
今天,老师又布置了新的学习任务,关于白盒测试.感觉黑盒测试,我们用的比较多,白盒测试就相对陌生了.上课的时候老师虽然也进行了一定的点拨,外加我们学习了SPOC视频,但是并没有看到什么具体的项目,所以实 ...
- WCF把书读薄（2）——消息交换、服务实例、会话与并发
上一篇:WCF把书读薄(1)——终结点与服务寄宿 八.消息交换模式 WCF服务的实现是基于消息交换的,消息交换模式一共有三种:请求回复模式.单向模式与双工模式. 请求回复模式很好理解,比如int Ad ...
- 特殊的HttpApplication事件处理
在global.asax中,针对HttpApplication的事件处理,可以通过定义特殊命名的方法来实现.首先,这些方法必须符合System.EventHandler,因为所有的HttpApplic ...
- c# 求数组的最大值
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Window 7 Professional 多语言设置
1. 正常情况下,WINDOW系统只提供企业和旗舰版的语言切换的界面设置,其他版本没有. 2. 首先下载语言包,然后解压待用. 3. 以管理员身份运行命令窗口,如下输入: 4. 上面完成后,下载 ht ...
- kali linux之BurpSuite
web安全工具中的瑞士军刀,统一的集成工具发现web安全漏洞 所有的工具共享一个能处理并显示http消息的可扩展框架, 模块之间无缝交换信息. 有free版和professional版,java开发, ...