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>' ...
随机推荐
- SqlServer-truncate && delete && drop 的区别
有些人在删除表的所有记录的时候,喜欢这样来——不给DELETE 语句提供WHERE 子句,表中的所有记录都将被删除.但这种方法是不可取的,正确的应该使用 TRUNCATE TABLE tb_name ...
- CMake 自定义编译选项
自定义编译选项 CMake 允许为项目增加编译选项,从而可以根据用户的环境和需求选择最合适的编译方案. 例如,可以将 MathFunctions 库设为一个可选库,如果该选项为 ON ,就使用该库定义 ...
- Ubuntu下libpcap安装步骤
第一步,先安装GCC ,一般都会自动安装 sudo apt-get install build-essential 第二步,GNU M4可以从此处ftp.gnu.org/gnu/m4/ 下载 sudo ...
- 基于 EntityFramework 的数据库主从读写分离架构 - 目录
基于 EntityFramework 的数据库主从读写分离架构 回到目录,完整代码请查看(https://github.com/cjw0511/NDF.Infrastructure)中的目 ...
- 编写高质量代码改善C#程序的157个建议——建议52：及时释放资源
建议52:及时释放资源 垃圾回收机制自动为我们隐式地回收了资源(垃圾回收器会自动调用终结器),那我们为什么要主动释放资源呢? private void buttonOpen_Click(object ...
- 测试中常用到的linux命令
1. man 格式化以及列出命令的(在线)操作手册. 使用方法 man [ -options ] name man man ...
- 在Eclipse中连接SQL
原创 在Eclipse中连接SQL分为如下几个步骤: 1.加载驱动程序 2.创建连接对象 3.创建执行SQL语句的对象 4.执行SQL语句 5.关闭new出来的对象 1.加载驱动程序(以SQL为例) ...
- 一步之遥——第七届蓝桥杯C语言B组（国赛）第一题
原创 一步之遥 从昏迷中醒来,小明发现自己被关在X星球的废矿车里.矿车停在平直的废弃的轨道上.他的面前是两个按钮,分别写着“F”和“B”. 小明突然记起来,这两个按钮可以控制矿车在轨道上前进和后退.按 ...
- WPF MultiSelect模式下ListBox 实现多个ListBoxItem拖拽
WPF 的ListBox不支持很多常见的用户习惯,如在Explorer中用鼠标可以选择多项Item,并且点击已经选择的Item,按住鼠标左键可以将所有已选择Item拖拽到指定的位置.本文简单的实现了这 ...
- Dos命令 WIN10 WIFI命令
设置WIFI命令: netsh wlan set hostednetwork ssid=T key=123456798 mode=allow netsh wlan start hostednetwor ...