尝试在让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 相关文章推荐
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
JS array数组检测方式解析
May 19 Javascript
vue实现表格合并功能
Dec 01 Vue.js
node.js文件的复制、创建文件夹等相关操作
Feb 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 一元分词算法
2009/11/30 PHP
PHP Socket 编程
2010/04/09 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
浅析JavaScript动画
2015/06/10 Javascript
js简单时间比较的方法
2016/08/02 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
js实现网页随机验证码
2020/10/19 Javascript
python实现决策树ID3算法的示例代码
2018/05/30 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
python如何将两个txt文件内容合并
2019/10/18 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
初级会计求职信范文
2014/02/15 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书