如何优雅的用 js 动态添加 html 代码？ · Ruby China
如果需要在js里动态的加载一些html代码，一般会选择下面这样的方式
str="&div class="dialog"&&div class="title"&&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条&/div&&div class="content"&&img src="delete.jpg" alt="" /&&span&您真的要GG吗？&/span&&/div&&div class="bottom"&&input id="Button2" type="button" value="确定" class="btn"/&&&&input id="Button3" type="button" value="取消" class="btn"/&&/div&&/div&"
感觉这样太丑了，可读性和可维护性都很差。有什么更加优雅和简洁的方式吗？
gem 'liquid'
gem 'settingslogic'
# settingslogic config file
template: |
blabla.... {{name}}... blabla... {{email}}
# controller
template = Liquid::Template.parse(Settings.template)
result = template.render('name' =& '...', 'email'
可以试试这个：
&div class="dialog"&\
&div class="title"&\
&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条\
&div class="content"&\
&img src="delete.jpg" alt="" /&\
&span&您真的要GG吗？&/span&\
&div class="bottom"&\
&input id="Button2" type="button" value="确定" class="btn"/&&&\
&input id="Button3" type="button" value="取消" class="btn"/&\
console.log(str);
Coffeescript
&div class="dialog"&
&div class="title"&
&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条
&div class="content"&
&img src="delete.jpg" alt="" /&
&span&您真的要GG吗？&/span&
&div class="bottom"&
&input id="Button2" type="button" value="确定" class="btn"/&&&
&input id="Button3" type="button" value="取消" class="btn"/&
想要完全避免这种情况 可以用react
就因为这点就使用react的话，未免有点为了技术去技术了。
str = '&div class="dialog"&' +
'&div class="title"&' +
'&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条' +
'&/div&' +
'&div class="content"&' +
'&img src="delete.jpg" alt="" /&&span&您真的要GG吗？&/span&' +
'&/div&' +
'&div class="bottom"&' +
'&input id="Button2" type="button" value="确定" class="btn"/&&&' +
'&input id="Button3" type="button" value="取消" class="btn"/&' +
'&/div&' +
如果不依赖lib，只能从代码格式化的角度去做优化了。
如果嫌弃react太重（10k+ js），可以去看看 前端模板。比如 doT.js
&div id="dialog-quit" class="dialog"&
&div class="title"&
&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条
&div class="content"&
&img src="delete.jpg" alt="" /&
&span&您真的要GG吗？&/span&
&div class="bottom"&
&input id="Button2" type="button" value="确定" class="btn"/&&&
&input id="Button3" type="button" value="取消" class="btn"/&
JavaScript(jQuery)
$('#dialog-quit')
用jQuery的load方法试试咯
写在js中没有重用性，显得代码很乱，增加后期维护的复杂度，还是希望html的代码能够和js代码分开，而且可以通过ajax动态添加数据。
这种方式不错，但是如果需要动态生成一些数据，是不是还得根据jquery选择器一个一个replace？
前端模板引擎
没必要过度工程. 楼主的情况应该是很简单的动态效果, 在 coffee 写就行
coffee 写就好了。
恩，谢谢！
Handlebars
google js template
大神你复活了？
18楼 已删除
这么大段的html代码放在js中维护完全不合理
template = $('#dialog-quit').html()
html = template.format({data})
只需配合几行的模板方法：
// add `format` method to `String`, equivalent to printf/string.format
// usage: "{a} {b}".format({a: 'hi', b: 'b'}) =& "hi b"
// /questions/610406/javascript-equivalent-to-printf-string-format/34317
if (!String.prototype.format) {
String.prototype.format = function() {
var str = this.toString();
if (!arguments.length)
var arg = typeof arguments[0],
args = (("string" == args || "number" == args) ? arguments : arguments[0]);
for (arg in args)
str = str.replace(RegExp("\\{" + arg + "\\}", "gi"), args[arg]);
这两天突然想起来以前看到某大神提到 rivets
把以前一个小项目的 ujs + tempojs 的代码用
Promise + rivets + watch.js 重构了一下，代码清晰了好多
如果你用过backbone.js可能会知道这种方式:
1.把要用js加载的html放到 html 文件的script标签里:
&script id="your-tmpl" type="text/template" charset="utf-8"&
&div class="dialog"& .... &/div&
2.javascript中加载(jQuery)
var dialogTemplate = $('#your-tmpl').html();
如果有需要传递参数, 比如使用 underscore 的template
1.创建模板
&script id="your-tmpl" type="text/template" charset="utf-8"&
&div class="dialog"&
&%= name %&
2.javascript中加载(jQuery)
var dialogTemplate = $('#your-tmpl').html()
3.编译模板
var dialogHtml = _.template(dialogTemplate)({ name: 'lvjain700' });
除非是很大量的需要，否则我会用 2 楼的方法，如果真要找个 template 处理，可以搜寻 javascript template 找个合用的。
后方可回复, 如果你还没有账号请点击这里 。
共收到 23 条回复最近在学习backbone，学习理解backbone就要先理解spa，理解spa就要先了解单页面应用是如何做到页面不刷新改变url的。
相较于不同页面的跳转，AJAX可以说大大提高了用户的浏览体验，不用看到页面切换之间的白屏是件很惬意的事情。但是很多早先的AJAX应用是不支持浏览器的前进后退的，这导致了用户不管在网站里浏览到何处，一旦刷新就会立刻回到起初的位置，并且用户也无法通过浏览器的前进后退按钮来实现浏览历史的切换。
对于第一个问题，解决还算容易，只要用cookie或者localStorage来记录应用的状态即可，刷新页面时读取一下这个状态，然后发送相应ajax请求来改变页面即可。但是第二个问题就很麻烦了，先说下现代浏览器的解决方案。
HTML5 解决方案
要了解HTML5如何实现前进后退，就要先了解下history对象和location对象。
history对象
History 对象属性
1.length：返回浏览器历史列表中的URL数量，用户在当前标签每访问一个页面，此数量加1。因为隐私原因，URL具体内容不可见。 2.state：与当前网址相关的对象，只能通过pushState和replaceState添加或修改。我们可以可以用它来存储跟url有关的信息。
History 对象方法
1.history.back()
此方法无参数，触发后会返回前一个浏览的页面，相当于点击了浏览器的后退按钮。
2.history.forward()
此方法无参数，触发后会返回后退前浏览的页面，相当于点击了浏览器的前进按钮。
3.history.go(number)
此方法接受一个整形变量参数，history.go(-1)相当于后退一页，history.go(1)相当于前进一页，history.go(0)会刷新当前页面。
4.history.pushState(state, title, url)
改变url且不刷新页面的关键就是它了，此方法会改变当前页面的location.href并且修改当前的history.state对象，执行后history.length会增加1。此方法接受三个参数，
1.state：当前网址相关的对象。 2.title：页面标题，但是所有浏览器都忽略它，要改变标题还是要用document.title。 3.url：一个与当前页面同域的网址，location.href会变成此值。
5.history.replaceState(state, title, url)
此方法同上，但是它不会改变history.length，只会修改当history.state和location.href。
注意pushState和replaceState第三个参数不可跨域，并且不会触发浏览器的popstate事件和onhashchange事件(chrome33下测试)。
location对象
除了点击前进/后退按钮和history事件，还可以通过location的方法和修改location的属性来改变Url：
location对象的属性(读写)：
1.host:域名+端口号 2.hostname:域名 3.port:端口号 4.protocol:协议 5.href：完整路径 6.origin：协议+域名+端口 7.hash：井号 (#) 开始的 URL(hash) 8.pathname:文档路径+文档名 9.search:(?)后面的内容
可以通过改变location.href或location.hash来达到无刷新的目的。
location对象的方法：
1.assign:改变url的值，并且将当前的url添加到历史记录中history.length会增加1。location.assig(‘#' + x)会改变url但是不刷新页面。 2.reload:刷新页面。 3.replace:改变url的值，但是history.length不变。使用方法同assign。
popstate事件
当url改变时，比如用户点击前进/后退按钮，history.go(n)（n不等于0）,location.hash = x(x不等于当前的location.hash)都会触发此事件。可以用它来监听url，来实现各种功能。
&&& window.onpopstate = function(){
&&&&&&& //do sth
onhashchange事件
改变hash值会触发popstate事件，而触发popstate事件不一定会触发onhashchange事件。经过测试：
1.hash改变但是location.pathname不变会触发onhashchange事件，比如history.pushState(”, ”, ‘#abc'); 2.hash和location.pathname一起改变则不触发，比如history.pushState(”, ”, ‘a#abc');
老旧浏览器的写法
老旧浏览器也不支持pushState和replaceState，所以通过popstate(事实上也不支持这个方法)监听url变化的路走不通。那么只能通过改变url#后面的内容来达到无刷新，但是它们又不支持onhashchange，所以对url的变化是无动于衷的(除了页面会滚动至页面对应id的位置)。那么只能祭出大招：轮询，起一个setInterval来监听url的值。Like this:
var prevHash = window.location.
var callback = function(){...}
window.setInterval(function() {
&&& if (window.location.hash != prevHash) {
&&&&&&& prevHash = window.location.
&&&&&&& callback(prevHash);
当然这样写非常非常挫，如果不考虑点击页面带有id的a标签来改变hash的情况，可以利用设计模式来优雅的实现监听url。比如经典的观察者模式，专门用一个类来实现改变hash的功能，然后所有要监听url变化的类(观察者)去订阅这个(被观察者)类。
//改变url的类
function UrlChanger() {
&&& var _this =
&&& this.observers = [];
&&& //添加观察者
&&& this.addObserver = function(obj) {...}
&&& //删除观察者
&&& this.deleteObserver = function(obj) {...}
&&& //通知观察者
&&& this._notifyObservers = function() {
&&&&&&& var length = _this.observers.
&&&&&&& console.log(length)
&&&&&&& for(var i = 0; i & i++) {
&&&&&&&&&&& _this.observers[i].update();
&&& //改变url
&&& this.changeUrl = function(hash) {
&&&&&&& window.location.hash =
&&& _this._notifyObservers();
function oneOfObservers() {
&&& var _this =
&&& this.update = function() {...}
var o1 = new UrlChanger();
var o2 = new oneOfObservers();
o1.addObserver(o2);
o1.changeUrl('fun/arg1/arg2/');
//o2 has do sth...
需要使用的 jquery.history.js插件 在巨人的肩膀之上，以下前进后退工作基于插件完成！ 做了几个兼职，上天帮人完成页面的时候顺便做了一个ajax的请求。发现浏览器的刷新，后退，前进按钮失效。于是乎google了一下。发现了一些解决方法。其中一个jquery.hashchange.js的插件有的时候会失效，有的时候会造成页面多次请求。 换另外一个插件测试下，完美达到我的要求。 总的思路
window.history对象在编写时可不使用 window 这个前缀。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。 方法： history.back() - 加载历史列表中的前一个URL，这与在浏览器中点击前进按钮是相同的history.forward() - 加载历史列表中的下一个URL，这与在浏览器中点击前进按钮是相同的 实例:
在一些AJAX被大量使用的页面，有时都不太敢刷新，因为刷新以后可能看到的是和原来有很大不同的页面。暂不讨论在某些页面内容大量更新的情况下是否该使用AJAX的问题，本文简单说一下保留浏览器前进、后退、刷新等功能。 这里假设一个有两个Tabs的页面，每个Tab中含有大量文字，可能还有图片。如果现在觉得Tab2的内容很好，把它加入收藏夹或发送给朋友。下次通过收藏夹打开或者朋友点开这个链接的时候很有可能看
一般在做 ajax load 的时候，很多人都不会考虑到需要浏览器支持前进后退功能，因为大部分人都不知道可以实现。
最近遇到这个问题，经过一小段研究，发现github已经有现成的开源工具使用，主要实现原理是利用html的锚点，即&a href=&#xxx&&
主要demo代码如下：
&ul& &li&&l
&script language=&JavaScript&& javascript:window.history.forward(1); &/script&
利用JS产生一个“前进”的动作，以抵消后退功能，这种方法应该是最简洁的，并且不需要考虑用户连点两次或多次“后退”的情况，缺点是当用户端禁用了JavaScript之后即
现在的浏览器里,有一个十分有趣的功能，你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来，当你在浏览器点击后退按钮的时候，你可以冲浏览历史上获得回退的信息，这听起来并不复杂，是可以实现的，我们来编写些代码。来看看它是如何工作的。
var stateObject = {}; var title = &Wow Title&; v
　　MACSafari 6 浏览器比Safari 5浏览器更好用，因为它有更快的运行速度和更好的用户体验，不过有一点不好就是Safari 6 浏览器中按delete 键让网页后退的功能没有了，那么怎么样才能找回这个功能呢？ 　　如果你想找回以前的按 delete 键后退功能：退出 Safari，打开终端（找不到的，点击 Mac 屏幕右上角的放大镜按钮，Spotlight 搜索 “终端”），粘入下面
苹果 Safari 6 浏览器的速度和体验比 Safari 5 好很多，但有一点挺不爽的：以前我可以按 delete 键后退到上个网页，升级到 Safari 6 后这功能没了，默认只能鼠标点击工具栏最左边的箭头或两指在触控板上向左横扫才能后退。 　　如果你想找回以前的按 delete 键后退功能：退出 Safari，打开终端(找不到的，点击 Mac 屏幕右上角的放大镜按钮，Spotlight 搜索
&html& &head& &title&test&/title& &script language =&javaScript&& &!--关闭浏览器 --& var flag = window.onbeforeunload = function () { if (flag) { var evt
浏览器后退时必定会有一些消息，这里使用jquery判断浏览器后退并弹出消息
jQuery(document).ready(function ($) { if (window.history && window.history.pushState) { $(window).on('popstate', function () { var hashLocation = locati
这两天在做Web前端时，遇到需求通过js实现文本复制的功能。 先不考虑浏览器的兼容性，看看各浏览器对复制功能的支持情况：
1、IE浏览器，解决方法有三种，代码如下：
function copy(txtid){ var txtObj = document.getElementById(txtid); if(window.clipboardData){ // 仅IE支持此对象，
您可在 Windows XP中利用 Internet Explorer 6所提供的 Back（后退）和 Forward（前进）按钮在当前所查看的多个网页之间进行快速切换——每单击一次按钮切换一个页面。如果您需要一次前进或后退多个页面，则应单击位于 Back（后退）或 Forward（前进）按钮右侧的黑色小箭头，以便看到最近访问过的网页列表——然后，只需单击相关页面即可实现跳转切换。此外，您还可右键
今天在做验证码的时候发现在IE中，验证码不会刷新，而谷歌等其他浏览器没有问题，所以我想到应该是缓存问题，因为IE默认的设置是如果访问地址没变化就不会去获取而是加载缓存中的内容
所以解决方案就是在验证码的切换地址后面加一个随机的参数
&script& //换验证码 function changeimg(){ /* math.random范围是0-1 *9
注：images文件夹下图片的命名是从1~5.jpg有规律的 声明的 var array = [1, 2, 3, 4, 5]; 这个数组存放的是图片的名称
&head& &title&&/title& &script src=&Jquery1.7.js& type=&text/javascript&quo
在网页设计中，可能由于某种需求，需要禁止浏览器的后退按钮，特别是一些对用户操作比较严格的网站，如果用户重复提交事件，然后又后退，这样可能会对某些数据产生灾难性的问题。所以今天就向大家介绍一种通过location.replace禁止浏览器后退按钮的方法。 这种方法的原理是，用新页面的URL替换当前的历史纪录，这样浏览历史记录中就只有一个页面，后退按钮永远处于失效状态，用户也就无法进行后退了。具体的使
在做一些关于会员在线的问题时，往往我们要根据览器是否关闭来判断用户是否下线，然后再从session和application中将此用户移除。
由于浏览器是无状态的，在这时候捕捉浏览器关闭会出现两种情况： 1.真正的关闭浏览器 (a.点击关闭按钮 b.右击任务栏关闭 c.按alt+F4关闭) 2.刷新浏览器。
那如何判断区分这两种动作呢?
一. Javascript代码处理方法：
今天检查自己用JQuery+AJAX+PHP做的网站后台登录检测，发现登陆成功后执行页面跳转函数这段JavaScript（JS）代码特效在IE和谷歌浏览器Chrome下都可以很好地执行，兼容性还不错。结果到了火狐（FireFox）浏览器下setTimeout这个JS内置函数不执行了，无效了，也没报错！打开FireBUG指望它能检测出JS的错误，结果没用...Javascript(JS)脚本代码在各
一、图片上传实现本地预览
由于上传图片功能，现在大多数都需要在本地实现预览，为了能够更好的让用户体验到效果，实现成品的证明，需要兼容好几种浏览器，所有通过各个例子整合了这个例子插件，兼容火狐、谷歌、ie8，其他的没有进行测试过
(function($){ jQuery.fn.extend({ uploadPreview: function(opts){ opts = jQu
由于客户大多数是不懂电脑的大菜鸟。所以误操作比较多，有时没有选中文本框，然后不小心按了退格之后，刚刚辛苦填好的表单就什么也后退的没有了。网上查了好多资料，然后整合了一下。分享给大家。也希望酸奶姐姐来看看我的第一篇技术博客。呵呵(别介意我提到了你哦。)。废话不多说。上源码。
$(function(){ //处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
这里所说的缩放不是指浏览器大小的缩放，而是指浏览器网页内容的百分比缩放（按Ctrl和+号键或者-号键的缩放）。 检测这种缩放有很种方法，QQ空间都通过flash来检测浏览器是否处于缩放。这里提供javascript的方法来检测浏览器的缩放。 对于 IE6，就直接无视了，因为 IE6 只能对文本进行缩放。 先来说说浏览器提供的标准检测接口，window.devicePixelRatio 是设备上物理
本文实例讲述了javascript实现客户端兼容各浏览器创建csv并下载的方法。分享给大家供大家参考。具体实现方法如下：
$(&#radarDLBut&).click(function(){ var data = [displayData[&radar_chart&][&r_label&],displayData[&rada
　　在 Web 项目中，浏览器兼容以及跨浏览器测试是最重要的也是最费劲的工作。DalekJS是一个基于 JavaScript（或 Node.js） 的免费和开源的自动化测试接口。它能够同时运行测试一组流行的浏览器（Chrome，IE，Firefox 和 WebKit）。
本文链接：DalekJS – JavaScri
如何用Javascript检测浏览器似乎是老生常谈的问题。根据本人的经验，使用Javascript检测浏览器无非使用两大类的方法。
其一，是使用使用浏览器的功能属性。比如检测浏览器是否支持getElementById方法就可以使用
if(document.getElementById){ &nbsp
在很多时候，我们需要改变这些默认操作，比如：点击一个链接时，我们执行一些 ajax 操作，但是我们并不希望执行跳转动作，于是，就有了本文：阻止浏览器默认操作。
其实这并不是一个非常难的课题，单独拿出来的原因还是浏览器兼容问题：
&script type=&text/javascript&&
// 说明：Javascript 中阻止浏览器默认
&script language=&javaScript&& 　　function closeWindow() 　　{ 　　　　　window.opener = 　　　　　window.open(' ', '_self', ' '); 　　　　　window.close(); 　　} &/script&
鉴于安全性的需要，该对象收到很多限制，现在只剩下下列属性和方法。History历史对象有length这个属性，列出历史的项数。JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。 History历史对象并有以下方法 back() 后退，跟按下“后退”键是等效的。 forward() 前进，跟按下“前进
本文以实例讲述了CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能，对于网站开发来说非常实用。 具体操作方法如下： 语言包文件如下：
application\language\english\bm_lang.php application\language\zh-cn\bm_lang.php
注意： 1. “_lang.php”的前缀要一致； 2. 如果还有其
javascript检查浏览器是否支持flash，程序输出结果：
&script& function flashChecker() { var hasFlash = 0; //是否安装了flash var flashVersion = 0; //flash版本 if (document.all) { var swf = new ActiveXObject('ShockwaveFl
在Windows Server 2008R2上使用IE8访问不了/网站，使用兼容模式也访问不了，很是郁闷，结果是这样：
然后安装个搜狗浏览器，正常模式下也是无法访问，使用搜狗的兼容模式可以浏览了：
这会是什么原因呢，网页不兼容吗，网页不兼容会是Http的400错误吗？
这个目前世界上最短的 Javascript 判定 IE 浏览器的方法来自俄罗斯！它已经在各版本的 IE 以及目前其他流行的浏览器上经过测试，基于 IE 的 Bug，微软虽然已经意识到，但是从来没有纠正过。
&script type='text/javascript'& var ie = !-[1,]; alert(ie); &/script&
从“译言”上的一篇文章据悉各浏览器Javascript的对比。我个人作为一名“准”的Javascript开发者，对此事自然比较的关注。SunSpider的测试面我还是保持对其信任的态度的，正如原文所说的“它是一组被精心设计的测试，易于运行也非常全面”。
下面是测试的内容：
3d-纯粹JavaScri
功能很简单，代码也很简洁，这里就不多废话了
function fullScreen() { var el = document.documentElement, rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen, wscrip
从技术上讲，javascript并没有提供内置的系统来实现这个非常重要的事件驱动编程，不过得益于浏览器的DOM 事件模型，这缺点并没有过多地暴露出来。但实质上javascript之父也不能主宰这一切，他支持的网景也没有强大到让竞争对手乖乖地使用它的产品，微软搞了一个JScript，死去的Macromedia 搞了一个ActionScript，还有更多，听说这个分支挺复杂的。但借用浏览器内置的DOM
navigator浏览器对象，包含了正在使用的Navigator的版本信息。反映了当前使用的浏览器的资料。JavaScript客户端运行时刻引擎自动创建navigator对象。 更详细的信息可以去查msdn或者Navigator2.0以后的说明文档，这里我们之做个简单的说明 包括一下几大属性：
Session.Abandon(); Response.Redirect(&Login.aspx&);
但是这样点点击浏览器的后退仍然可以回到刚才的页面，这可不行，在网上找了一下，也有不少人遇到这样的问题，试了一些方法，都不管用。不过最后还是找到，共享一下。 http://blog.csdn.net/lhypang2006/archive/
本文实例讲述了JavaScript阻止浏览器返回按钮的方法。分享给大家供大家参考。具体分析如下： 下面的JS代码可以阻止用户点击返回按钮，非常实用，需要的朋友可以收藏一下。
&SCRIPT type=&text/javascript&& window.history.forward(); function StopBack() { window.history.
//事件处理兼容各种浏览器，采用能力检测方法，所谓能力检测，就是有能力就做，没有能力就不做 //定义一个处理事件的对象，兼容各种浏览器，dom2级事件处理和ie事件，如果这两个事件都不兼容，就采用dom0级处理 var eventUtil ={ addEvent:function(element,type,handler){ if (element.addEventListener) { //非I
JavaScript中的History历史对象包含了用户已浏览的URL的信息，是指历史对象指浏览器的浏览历史。鉴于安全性的需要，该对象收到很多限制，现在只剩下下列属性和方法。History历史对象有length这个属性，列出历史的项数。JavaScript所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之
web开发中常常要实现“复制到剪切板”功能。这个功能很实用，但是由于安全问题，浏览器的限制越来越严，实现的方法也越来越有限了。Firefox默认下不能直接通过Javascript操作剪切板，必须开启相关的设置才行。想只通过Javascript技术实现跨浏览器的剪切板是行不通的。现在常用的方法是利用JavaScript+Flash实现，普遍流传的办法是_clipboard.swf，这是国外最早实现的
但实质上javascript之父也不能主宰这一切，他支持的网景也没有强大到让竞争对手乖乖地使用它的产品，微软搞了一个JScript，死去的Macromedia 搞了一个ActionScript，还有更多，听说这个分支挺复杂的。但借用浏览器内置的DOM事件模型，第一个后果是，想使用它就必须借助某个DOM对象，window，document或元素节点，第二个后果是由于每个浏览器对DOM的支持不一，不能