IE中只读的innerHTML属性 - 追梦

2009

Oct

编写ajax程序时，经常需要动态生成页面元素，而element的属性innerHTML就是我们经常利用的途径。但今天在为一个table元素的innerHTML时赋值时，在firefox下是好的，但在ie下却没反应，代码如下：

document.getElementById("newline").innerHTML = document.getElementById("newline").innerHTML + tmpstr;

在网上找了一下资料，原因是在ie下，下列元素table,thead,tfoot,tbody,tr,col,colgroup,html,title,style,frameset的innerHTML属性是只读的（注意没有td），所以没法改变，如果想要在ie实现像Firefox下面的效果，需要用jQuery，写法如下：

var temp = $("#idname").html() + tmpstr;  
$("#idname").html(temp);

下面来看一个实例：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>IE中只读的innerHTML属性</title>  
<script language="javascript" type="text/javascript" src="jquery.js"></script>  
<script language="javascript" type="text/javascript">  
function newadd(){  
    var name = document.getElementById("name").value;  
    var email = document.getElementById("email").value;  
    var tmpstr = "<tr  width='100%'>";  
    tmpstrtmpstr = tmpstr + "<td  width='50%'>"+name+"</td>";  
    tmpstrtmpstr = tmpstr + "<td width='50%' >"+email+"</td>";  
    tmpstrtmpstr = tmpstr + "</tr>";  
    /*兼容ie与Firefox*/  
    var temp = $("#idname").html() + tmpstr;  
    $("#idname").html(temp);  
    /*只兼容Firefox*/  
    document.getElementById("newline").innerHTML = document.getElementById("newline").innerHTML + tmpstr;  
}  
</script>  
</head>  
<body>  
<form>  
  <input id="name" type="text" />  
  <input id="email" type="text" />  
  <input type="button" value="提交" onclick="newadd()" />  
</form>  
<table width="320" border="0" cellspacing="0" cellpadding="0">  
  <tbody id="idname">  
  </tbody>  
</table>  
</body>

点击此处查看演示效果。

本站原创，转载请标明：来自追梦博客(http://www.wuleilei.com/)

本文地址：http://www.wuleilei.com/Blog/240

标签： innerHTML, javascript

阅读全文>> | 评论(4) | 阅读(1537)

精通JavaScript jQuery (2009-06-19)

JavaScript实现自动刷新 (2009-10-06)

让window.event.keyCode兼容Firefox (2009-10-12)

JavaScript返回上一页并自动刷新的方法 (2009-11-12)

JavaScript去除字符串两端空格 (2009-12-22)

JavaScript全选与取消全选 (2009-12-24)

一款很不错的JS日历插件 (2010-01-04)