在使用JavaScript标签<script>的时候，其中type最常用的就是text/javascript

其实这个type还有其他用法，下面直接给出例子：

type属性为text/html的时候，<script>片断中定义一个被JS调用的代码，代码不会在页面上显示

  1. <script id="commentTemplate" type="text/html">
  2. <li>
  3. <div class="photo">
  4. <a href="#"> <img src="[UserImg]" /></a>
  5. </div>
  6. <p>
  7. <a href="#">[UserName]：</a><span class="time">[CreateDate]</span>
  8. </p>
  9. <div class="clear"></div>
  10. </li>
  11. </script>

再看上面的代码片段，我们在下面的代码中怎么使用，如下：

  1. <html>
  2. <head>
  3. <title>标题</title>
  4. </head>
  5. <body>
  6. <div id="comment_ul_2"></div>
  7. <input type="button" id="addFun" value="click me" />
  8. <script type="text/javascript">
  9. var reg = new RegExp("([^\[]*?)\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
  10. $("#addFun").click(function() {
  11. var html = document.getElementById("commentTemplate").innerHTML;
  12. var source = html.replace(reg, function(node, key) {
  13. return {
  14. 'UserImg' : '1',
  15. 'UserName' : '张',
  16. 'CreateDate' : '2011-1-1'
  17. }[key];
  18. });
  19. $("#comment_ul_2").append(source);
  20. });
  21. var zzl = "name:[name]";
  22. zzl = zzl.replace(reg, function(node, key) {
  23. return {
  24. 'name' : '小明'
  25. }[key];
  26. });
  27. alert(zzl);
  28. </script>
  29. </body>
  30. </html>

这里解释一下：其中有一个replace，在替换时，可以接受一个json字符串，然后根据json的key来对比js模块里的key，进行赋值！

另外，网上有一些比较好的关于 text/template 模版用法的插件js，也是个很好用的模版技术。

JavaScript的type属性等于text/html 例子的更多相关文章

  1. 让script的type属性等于text/html

    type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate&quo ...

  2. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  3. <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)

          application/javascript是服务器端处理js文件的mime类型,text/javascript是浏览器处理js的mime类型,后者兼容性更好(虽然application/ ...

  4. jquery html属性和text属性的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML <input> 标签的 type 属性

    HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...

  6. js修改input的type属性问题

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...

  7. input的type属性

    input的type属性:http://www.w3school.com.cn/tags/att_input_type.asp 基本语法: <input type="hidden&qu ...

  8. input表单的type属性详解，不同type不同属性之间区别

    目标:详解表单input标签type属性常用的属性值 一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...

  9. Python：bs4中 string 属性和 text 属性的区别及背后的原理

    刚开始接触 bs4 的时候,我也很迷茫,觉得 string 属性和 text 属性是一样的,不明白为什么要分成两个属性. html = '<p>hello world</p>' ...

随机推荐

  1. 10.IN 操作符

    IN 操作符 IN 操作符允许我们在 WHERE 子句中规定多个值. SQL IN 语法 SELECT column_name(s) FROM table_name WHERE column_name ...

  2. R dataframe 遗忘, which 矩阵搜索

    A data frame is used for storing data tables. It is a list of vectors of equal length. For example, ...

  3. React官方网站学习

    React官方网站  英文版 https://reactjs.org/tutorial/tutorial.html React官方网站  中文版 https://react.docschina.org ...

  4. CodeForces 489E Hiking (二分+DP)

    题意: 一个人在起点0,有n个休息点,每个点有两个数值,分别表示距离起点的距离xi,以及所获得的愉悦值bi,这个人打算每天走L距离,但实际情况不允许他这么做.定义总体失望值val = sum(sqrt ...

  5. 用maven将项目安装到本地仓库，为什么老是在默认仓库地址（C:\Users\userName\.m2\repository）

    使用mvn clean install安装项目到本地的时候,在idea中配置好了本地仓库地址,见下图: 但是安装时,还是安装到了C:\Users\userName\.m2\repository路径下, ...

  6. Unity3D管网分析

    给大家分享一下自己之前没事写的Unity3D的插件,主要用来对管网的搭建和分析, 开源在Github上 https://github.com/LizhuWeng/PipeNet,可以给需要的朋友做一个 ...

  7. angular 父组件调用子组件

    import { Component, OnInit, ViewChild } from '@angular/core'; @Component({ selector: 'app-child', te ...

  8. P - 区间与其他数互质数的个数 HDU - 4777

    Rabbit Kingdom Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  9. ecliplse导入tomcat

    上面点击之后,弹出的窗口最大化: 导入成功之后如下图:

  10. ES聚合报错

    在测试Elasticsearch聚合的时候报了一个错误.具体如下: GET /megacorp/employee/_search { "aggs": { "all_int ...