当<script>中的type等于text/html时,我们可以做很多事件!

简介:

我们可以在<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,进行赋值!

真的很有意思!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:当<script>中的type等于text/html时,我们可以做很多事件!,如需转载请自行联系原博主。

目录
相关文章
|
4月前
|
安全 Go
Golang深入浅出之-Go语言模板(text/template):动态生成HTML
【4月更文挑战第24天】Go语言标准库中的`text/template`包用于动态生成HTML和文本,但不熟悉其用法可能导致错误。本文探讨了三个常见问题:1) 忽视模板执行错误,应确保正确处理错误;2) 忽视模板安全,应使用`html/template`包防止XSS攻击;3) 模板结构不合理,应合理组织模板以提高可维护性。理解并运用这些最佳实践,能提升Go语言模板编程的效率和安全性,助力构建稳健的Web应用。
55 0
|
3月前
|
移动开发 HTML5
详解 HTML5 服务器发送事件(Server-Sent Events)
详解 HTML5 服务器发送事件(Server-Sent Events)
52 0
|
4月前
|
Java 数据库
【java】RTF转HTML或者TEXT
【java】RTF转HTML或者TEXT
21 1
|
11月前
|
JavaScript 前端开发
前端基础 -JQuery之val,text,html
前端基础 -JQuery之val,text,html
66 1
|
4月前
|
安全 Go 开发者
Golang深入浅出之-Go语言模板(text/template):动态生成HTML
【4月更文挑战第25天】Go语言的`text/template`和`html/template`库提供动态HTML生成。本文介绍了模板基础,如基本语法和数据绑定,以及常见问题和易错点,如忘记转义、未初始化变量、复杂逻辑处理和错误处理。建议使用`html/template`防止XSS攻击,初始化数据结构,分离业务逻辑,并严谨处理错误。示例展示了条件判断和循环结构。通过遵循最佳实践,开发者能更安全、高效地生成HTML。
90 0
|
4月前
|
JSON Java 数据格式
Could not extract response: no suitable HttpMessageConverter found for ..content type [text/html...]
Could not extract response: no suitable HttpMessageConverter found for ..content type [text/html...]
310 0
|
4月前
|
Web App开发 移动开发 HTML5
HTML中input标签的23种type类型
HTML中input标签的23种type类型
|
10月前
|
存储 JSON 前端开发
关于 Angular SSR 应用 index.html 中的 serverApp-state script 元素
关于 Angular SSR 应用 index.html 中的 serverApp-state script 元素
|
10月前
|
JavaScript 前端开发 数据安全/隐私保护
HTML中input常用的type属性及使用场景
HTML中input常用的type属性及使用场景
151 0
|
11月前
|
JSON 前端开发 JavaScript
SAP UI5 index.html 里的 bootstrap script 介绍
SAP UI5 index.html 里的 bootstrap script 介绍
下一篇
云函数