javascript inneHTML的地雷
更新时间：2010年02月20日 10:48:27 作者：
大家都喜欢用innerHTML添加内容，但是innerHTML这东西在两大阵营中有许多不同。
回顾一下，IE会把标签内前面的一些空白kill掉，还会把它里面标签统统大写，会显示动态添加的属性，在某些元素中，它还是只读的。这个由IE发明的东西，最后被爆如此多缺陷，真是令人心寒。不过innerHTML还有一地雷，存在于最标准的火狐中，看下面代码：
var newTable = document.createElement('table');
document.body.appendChild(newTable);
var newTr = document.createElement('tr');
var rowContent = '<td>司徒正美 </td><td><em>RestlessDream</em></td>';
newTr.innerHTML = rowContent;
newTable.appendChild(newTr);
alert(newTable.innerHTML)
if (rowContent.toLowerCase() == newTr.innerHTML.toLowerCase()) {
alert("一定如我所愿！");
}else {
alert("你踩雷了！");
}
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
当我们把innerHTML加入到tr节点时，它会被firefox解析成:
而不再是原来的:
td标签被去掉了！我想是不是与加入DOM树的顺序有关，调整一下：
var newTable = document.createElement('table');
document.body.appendChild(newTable);
var newTr = document.createElement('tr');
newTable.appendChild(newTr);
var rowContent = '<td>司徒正美 </td><td><em>RestlessDream</em></td>';
newTr.innerHTML = rowContent;
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这样就解决了firefox的情况！
复制代码 代码如下:
var newTable = document.createElement('table');
document.body.appendChild(newTable);
var newTr = document.createElement('tr');
var rowContent = '<td>司徒正美 </td><td><em>RestlessDream</em></td>';
newTr.innerHTML = rowContent;
newTable.appendChild(newTr);
alert(newTable.innerHTML)
if (rowContent.toLowerCase() == newTr.innerHTML.toLowerCase()) {
alert("一定如我所愿！");
}else {
alert("你踩雷了！");
}
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
当我们把innerHTML加入到tr节点时，它会被firefox解析成:
复制代码 代码如下:
司徒正美 <em>RestlessDream</em>
而不再是原来的:
复制代码 代码如下:
<td>司徒正美 </td><td><em>RestlessDream</em></td>
td标签被去掉了！我想是不是与加入DOM树的顺序有关，调整一下：
复制代码 代码如下:
var newTable = document.createElement('table');
document.body.appendChild(newTable);
var newTr = document.createElement('tr');
newTable.appendChild(newTr);
var rowContent = '<td>司徒正美 </td><td><em>RestlessDream</em></td>';
newTr.innerHTML = rowContent;
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这样就解决了firefox的情况！
相关文章
JVM是一种用于计算设备的规范，它是一个虚构出来的机器，是通过在实际的计算机上仿真模拟各种功能实现的。JVM的内存区域可以被分为：线程、栈、堆、静态方法区。本文将介绍JVM的内存模型，感兴趣的小伙伴，可以参考下2021-06-06
这篇文章主要介绍了JS实现控制图片显示大小的方法,即实现图片等比例缩放功能,涉及JS动态操作页面元素属性相关技巧,需要的朋友可以参考下2017-02-02
之前我们给大家讲诉过javascript多行字符串的7种解决办法，今天来给大家分享一个更简单的方法，非常的实用，大家一定要仔细看看哦。2015-05-05
List Installed Hot Fixes...2007-06-06
本篇文章给大家介绍js模块规范之AMD规范和CMD规范，模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式，对js amd cmd规范感兴趣的童鞋可以来本文学习2015-10-10
这篇文章主要介绍了JavaScript表格常用操作方法,实例汇总了javascript中表格操作的创建、添加、删除、遍历等常用操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
KnockoutJS是一个JavaScript实现的MVVM框架。通过本文给大家介绍BootstrapTable与KnockoutJS相结合实现增删改查功能【一】，感兴趣的朋友一起学习吧2016-05-05
本文分享了背景图自适应窗口大小的实例代码，具有一定的参考作用。下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了js实现完全自定义可带多级目录的网页鼠标右键菜单方法,实例分析了javascript实现自定义网页鼠标右键弹出菜单的技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了原生JS实现加载进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论