Apr
29
[原]jQuery中html()方法在IE 和 FireFox 的差别
本来想着用jQuery等框架去避免浏览器之间对JavaScript处理的差异,但最终还是不能完全回避问题。刚好今天在Linux下修改代码,就发现了一个IE 和 FireFox 处理起来的不同之处。该方法是html() 。
一、版本
因时间问题,我没有深究不同情况下的区别,仅列举一下现在的版本:
二、描述
问题很简单,就是在类似下面的html代码中:
使用jQuery的val()方法给该输入框赋值,然后用html()读取其HTML代码,会存在区别。
例如:
你会发现,IE 下是这样的:
而FF下是会是:
也就是说,FF下获得的HTML只有最原始的代码,不包括动态插入的内容。
◎ 测试页面:
知道区别就好,原因我暂时没空去看jQuery的源码,暂时的解决办法是,先获得html(),然后再对目标来修改了。如:
该问题估计与FF下appendTo()方法的不同有关,下面的输入框都受影响:
※ 下面的地址,提供了一个jQuery plugin的.formhtml()方法来处理该问题。(同样是html()后,再修改目标)
http://www.cnblogs.com/michael110/archive/2010/03/05/1679289.html
三、类似的问题
从上面可见,使用jQuery也不是可以完全避免IE和FF对JavaScript处理的不同的,类似的还有。例如下面的选择符:
在FF下可以获得id="dialog"下的id="editTable"的DOM,但IE下,则为null 。所以,在使用jQuery时,还是需要谨慎啊!
四、参考
jQuery:append 和 appendTo 在firefox和ie中的区别
jquery html() 在IE 和Firefox下区别
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
一、版本
因时间问题,我没有深究不同情况下的区别,仅列举一下现在的版本:
引用
jQuery:1.3.2
InternetExplorer:7.0
FireFox:3.6.3
InternetExplorer:7.0
FireFox:3.6.3
二、描述
问题很简单,就是在类似下面的html代码中:
<div><input id="test" name="test" type="text" /><div>
使用jQuery的val()方法给该输入框赋值,然后用html()读取其HTML代码,会存在区别。
例如:
$('input[name=test]').val('ok');
alert($('div').html());
alert($('div').html());
你会发现,IE 下是这样的:
<input id="test" name="test" type="text" value="ok"/>
而FF下是会是:
<input id="test" name="test" type="text"/>
也就是说,FF下获得的HTML只有最原始的代码,不包括动态插入的内容。
◎ 测试页面:
下载文件
知道区别就好,原因我暂时没空去看jQuery的源码,暂时的解决办法是,先获得html(),然后再对目标来修改了。如:
$('#dialog').html($('div').html());
$('#dialog input[name=test]').val('ok');
$('#dialog input[name=test]').val('ok');
该问题估计与FF下appendTo()方法的不同有关,下面的输入框都受影响:
<input type="radio" />
<input type="checkbox" />
<textarea ></textarea>
<input type="checkbox" />
<textarea ></textarea>
※ 下面的地址,提供了一个jQuery plugin的.formhtml()方法来处理该问题。(同样是html()后,再修改目标)
http://www.cnblogs.com/michael110/archive/2010/03/05/1679289.html
三、类似的问题
从上面可见,使用jQuery也不是可以完全避免IE和FF对JavaScript处理的不同的,类似的还有。例如下面的选择符:
$('#dialog #editTable')
在FF下可以获得id="dialog"下的id="editTable"的DOM,但IE下,则为null 。所以,在使用jQuery时,还是需要谨慎啊!
四、参考
jQuery:append 和 appendTo 在firefox和ie中的区别
jquery html() 在IE 和Firefox下区别
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
$('input[name=test]')[0].value = "ok";
和
alert($('input[name=test]')[0].value);
這樣應該沒有ie 和ff 的問題
但我想说明的是,jQuery的html()方法在FF和IE下的不同。我新添加了一个测试的页面,您在两个浏览器上测试一下就明白了。这还涉及到FF下多个jQuery方法的差异,如append、appendTo等。