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>' ...
随机推荐
- Part5核心初始化_lesson2---设置svc模式
我们的Linux系统以及bootloader是工作在SVC模式!!怎么把处理器设置为SVC模式呢? CPSR寄存器或者SPSR寄存器最低5位可以设置模式,把该5位设置为0b10011, start.s ...
- [原创]MongoDB C++ 驱动部分问题解决方案（MongoDB C++ Driver）
本文为我长时间开发以及修改MongoDB C++ Driver时的一些问题和解决方案.目前本文所介绍的相关引擎也已经发布闭源版本,请自行下载 库版本以及相关位置:http://code.google. ...
- ThreadStart方式实现多线程
以ThreadStart方式实现多线程 3.1 使用ThreadStart委托 这 里先以一个例子体现一下多线程带来的好处,首先在Message类中建立一个方法ShowMessage(),里面显示了当 ...
- Recurrent Neural Network（递归神经网络）
递归神经网络(RNN),是两种人工神经网络的总称,一种是时间递归神经网络(recurrent neural network),另一种是结构递归神经网络(recursive neural network ...
- 【C#】CLR内存那点事（string）
string是比特殊的类,说引用类型,但不存在堆里面,而且String str=new String("HelloWorld")这样的重装也说没有的. 我们先来看一个方法 clas ...
- c++缓冲区------c++ Primer Plus
通常,通过使用缓冲区可以更高效地处理输入和输出.缓冲区是用作中介的内存块,它是将信息从设备传输到程序或从程序传输给设备的临时存储工具.通常,像硬盘驱动器这样的设备以512字节(或更多)的块为单位来传输 ...
- Liunx常用的100条命令汇存
1.关机 shutdown -h now 立刻关机 poweroff shutdown -r now 立刻重启 reboot logout 注销 2.进入图形界面 startx 3.vi编辑器 [vi ...
- 图层锁定vlisp函数高版本图元自动淡色显示
(defun c:tt(/ obj) (sk_layerLock (getvar "clayer") nil) (princ) ) ;;;name:sk_layerLock ;;; ...
- maven设置------settings.xml文件学习
https://blog.csdn.net/tomato__/article/details/13025187 快速预览 maven的配置文件为settings.xml,在下面路径中可以找到这个文件, ...
- linux操作之文本编辑器
1.文本编辑器的作用 编辑和修改系统中的那些以文本形式存在的文件(特别是各种配置文件),也可以用于 编写程序代码 2.linux下的常见编辑器 nano.Emacs.gedit.vim等 3.vim三 ...