们可以在<script>片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法:

 1   <script id="commentTemplate" type="text/html">
2 <li>
3 <div class="photo">
4 <a href="#">
5 <img src="[UserImg]" /></a></div>
6 <p>
7 <a href="#">[UserName]:</a><span class="time">[CreateDate]</span></p>
8 <div class="clear">
9 </div>
10 </li>
11 </script>
 1 <div id="comment_ul_2">
2 </div>
3 <input type="button" id="addFun" value="click me" />
4 <script type="text/javascript">
5 var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
6 $("#addFun").click(function () {
7 var html = document.getElementById("commentTemplate").innerHTML;
8 var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'CreateDate': '2011-1-1'}[key]; });
9 $("#comment_ul_2").append(source);
10 });
11
12 var zzl = "name:[name]";
13 zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占'}[key]; });
14 alert(zzl);
15
16 </script>

OK,这个意思是说,当你单击按钮时,可以把commentTemplate的内容追到comment_ul_2里,这很有意思吧,呵呵!

而其中有一个replace,也很有意思,向在替换时,可以接受一个json字符串,然后根据json的key来对比js模块里的key,进行赋值!

真的很有意思!

欢迎大家来我的新家看一看 3wwang个人博客-记录走过的技术之路

script标签的type="test/html"时的更多相关文章

  1. script标签中type为"text/x-template"或"text/html"

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

  2. script标签中type为<script type="text/x-template">是个啥

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

  3. 如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

    Hello, world! 本教程的这一部分内容是关于 JavaScript 语言本身的. 但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择.我们会尽可能少地 ...

  4. 【JavaScript性能优化】------理解Script标签的加载和执行

    1.script标签是如何加载的?当浏览器遇到一个 < script>标签时,浏览器会停下来,运行JavaScript代码,然后再继续解析.翻译页面.同样的事情发生在使用 src 属性加载 ...

  5. Node.js简易服务器,配合type="module" 实现html文件script标签 ES module引入模块

    相信大家在测试type="module" 在html文件中直接模块化引入 js时,会出现一个跨域问题. 当我们将<script ></scirpt> 标签t ...

  6. 发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存

    AppendFileVersion 是一个VSIX插件支持vs2015意以上版本 是我用来发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存 分享给大家! download ...

  7. 面试小记---外部脚本必须包含 <script> 标签吗?

    外部脚本必须包含 <script> 标签吗? 答案是否定的. 身为小白的我一开始也是以为这句话的对了,因为本来嘛,引用外部脚本不都用的是<script>标签中的src属性吗.所 ...

  8. js中的script标签

    在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...

  9. JavaScript之<script>标签简介

    向html页面中插入JavaScrpt的主要方法,就是使用<script>元素,下面是Html 4.01为<script>定义的6个属性. 1.async:可选表示应该立即下载 ...

随机推荐

  1. 信息学奥赛(NOIP)初赛学习方法推荐

    首先声明:本帖针对初学者,本帖只是列出一个大概的框架,不属于自学方法,有条件有能力,请找一位好老师来教,多跟前辈交流经验.(否则多会出现事倍功半的悲剧!) 一.初赛内容 初赛偏重于基础知识. 1. 一 ...

  2. 编译器错误消息: CS0016: 未能写入输出文件“c:/Windows/Microsoft.NET/Framework/v4.0.50727/Temporary ASP.NET Files/root .... 拒绝访问。

    此问题困扰良久,得终极解决方案 环境:windows 2008 server r2 + iis7 + .net framework4.5 解决:1. 错误信息中包含的目录“c:/Windows/Mic ...

  3. DOM实战-js todo

    1.需求: 实现一个如下页面: 最上面是输入框,后面是add按钮,输入文本点击add按钮,在下面就会出现一行,下面出现的每行最前面是两个按钮,然后后面是todo(要做的事) 第一个按钮是完成按钮,第二 ...

  4. Python之模块(一)

    模块 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少 ...

  5. 理解无偏估计(unbiased estimation)

    判断一个估计量“好坏”,至少可以从以下三个方面来考虑: 无偏估计 有效性 一致性 参考内容: 如何理解无偏估计量?https://www.matongxue.com/madocs/808.html 衡 ...

  6. as3 判断鼠标移动方向

    import flash.events.MouseEvent; var odx:Number=mouseX; var ody:Number=mouseY; stage.addEventListener ...

  7. WDA-BOPF业务对象处理框架

    SAP中的BOPF(Business Object Processing Framework) 正文 希望简化你的业务应用开发过程?业务对象处理框架(Business Object Processin ...

  8. ubuntu下安装jdk,tomcat,mysql,ftp,telnet,svn

    需求分析:自己弄了个小网站,想放到云服务器上,同时把自己积累的代码也放上去,服务器上的文件可以简单的在windows上查看,也可以方便的通过windows连接linux服务器. 解决:运行网站要用到j ...

  9. Maven的配置以及IDEA导入本地Maven

    1.首先看你的电脑jdk的环境变量是否配成功 2.Maven的下载地址:http://maven.apache.org/download.cgi 3.下载完成后解压到你要安装的目录,我的是直接放在D: ...

  10. 系统批量运维管理器pexpect的使用

    # pip install pexpect 或 # easy_install pexpect 1 #!/usr/bin/env python 2 import pexpect 3 child = pe ...