尝试在让script的type属性等于text/html


Posted in Javascript onJanuary 15, 2013

我们可以在<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>

<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': 'zhang', '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>

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

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

Javascript 相关文章推荐
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
layui实现动态和静态分页
Apr 28 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 #Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 #Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 #Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 #Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 #Javascript
javascript真的不难-回顾一下基础知识
Jan 15 #Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 #Javascript
You might like
php中http_build_query 的一个问题
2012/03/25 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
jupyter notebook 多行输出实例
2020/04/09 Python
详解rem 适配布局
2018/10/31 HTML / CSS
应用心理学个人求职信范文
2013/12/11 职场文书
初二学习计划书范文
2014/04/27 职场文书
中文专业自荐书
2014/06/29 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
Python装饰器的练习题
2021/11/23 Python
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏