javascript inneHTML的地雷
作者:bea
回顾一下,IE会把标签内前面的一些空白kill掉,还会把它里面标签统统大写,会显示动态添加的属性,在某些元素中,它还是只读的。这个由IE发明的东西,最后被爆如此多缺陷,真是令人心寒。不过innerHTML还有一地雷,存在于最标准的火狐中,看下面代码: 代码如下: var newTable = document.createElement('table'); document.body.appendChild(newTable); var newTr = docume
回顾一下,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("你踩雷了!");
}
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>强制在IE8模式下运行 by 司徒正美</title>
<script type="text/javascript">
window.onload = function(){
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("你踩雷了!");
}
}
</script>
</head>
<body >
</body>
</html>
[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;
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>强制在IE8模式下运行 by 司徒正美</title>
<script type="text/javascript">
window.onload = function(){
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;
alert(newTable.innerHTML)
if (rowContent.toLowerCase() == newTr.innerHTML.toLowerCase()) {
alert("一定如我所愿!");
}else {
alert("你踩雷了!");
}
}
</script>
</head>
<body >
</body>
</html>
[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("你踩雷了!");
}
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>强制在IE8模式下运行 by 司徒正美</title>
<script type="text/javascript">
window.onload = function(){
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("你踩雷了!");
}
}
</script>
</head>
<body >
</body>
</html>
[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;
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>强制在IE8模式下运行 by 司徒正美</title>
<script type="text/javascript">
window.onload = function(){
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;
alert(newTable.innerHTML)
if (rowContent.toLowerCase() == newTr.innerHTML.toLowerCase()) {
alert("一定如我所愿!");
}else {
alert("你踩雷了!");
}
}
</script>
</head>
<body >
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
这样就解决了firefox的情况!
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- ext combox 下拉框不出现自动提示,自动选中的解决方法
- javascript Firefox与IE 替换节点的方法
- jQuery 性能优化手册 推荐
- jquery实现的超出屏幕时把固定层变为定位层的代码
- JSON 学习之JSON in JavaScript详细使用说明
- js下用层来实现select的title提示属性
- Jquery+CSS 创建流动导航菜单 Fluid Navigation
- jquery 锁定弹出层实现代码
- javascript document.compatMode兼容性
- js操作ajax返回的json的注意问题!
- javascript入门基础之私有变量
- 第一个JavaScript入门基础 document.write输出
- jQuery入门问答 整理的几个常见的初学者问题
- jQuery 操作下拉列表框实现代码
- JavaScript 编写匿名函数的几种方法
- jquery 得到当前页面高度和宽度的两个函数
- jquery validator 插件增加日期比较方法
- 判定对象是否为window的js代码
- javascript 定义新对象方法