innerHTML这个属性做过ITOO项目的应该都不陌生，用来设置或获取位于对象起始和结束标签内的HTML。（获取HTML当前标签的起始和结束里面的内容）， 经常利用它实现信息的动态显示。在项目中进行Ajax异步刷新时才刚刚接触到，这里面还有一段小插曲：
异步刷新
<span style="float: right; padding-right: 30px;font-size:20px;font-family: KaiTi;position:absolute;right:5px;top:40px;" class="head";>
欢迎您:@Session["username"]总积分:<span id="myGrade" style="font-size:18px;"></span>
setInterval(function () {
queryGrade();
},1000);//1秒刷新
function queryGrade()
{
$.ajax({
type: "POST",url: "/frmQuestion/GetNewGrade",datatype: "JSON",success: function (data) {
document.getElementById("myGrade").innerHTML = data;//与innerHTML遇见
console.log(data);
}
});
public string GetNewGrade()
{
if (Session["userId"] != null)//这一定要进行null值判断，因为这用的是session值
{
string userID = Session["userid"].ToString();
return new QuestionBLL().GetNewGrade(userID);
}
return null;
}
这个便是用来进行异步刷新的代码，这个主要是想做这个功能如图：
这个积分在提交问卷后需要立即刷新，开始时是获取的session里面的值，但是session的刷新只有退出后才可以再次刷新，于是便用其他方法不用session来获值了直接从数据库获值，然后动态刷新既可以了，这就需要用到ajax了，问题来了，将这个值 如何显示呢，如何接收这个值呢？也就用到了innerHTML，效果就如上面的照片一样。
下面便是innerHTML的一个小例子
看看这个例子：
<html>
<head>
<script>
function test(){//将后面的那些字符串的属性，赋值给id为s的那行
document.getElementById("s").innerHTML="<br /><br />"+Math.random();
setTimeout('test();',1000); //1秒执行1次test()函数
}
function Test1() {
alert("单击之前w的之值: "+document.getElementById("w").innerHTML);
var str1 = "单击之后"
document.getElementById("w").innerHTML=str1;
document.getElementById("AlbumList").innerHTML="<table><tr>";
alert(document.getElementById("AlbumList").innerHTML);
}
</script>
</head>
<body onload=test();>
<p id="s"></p>
<p id="w">你好！！！！！！</p>
<button onclick="Test1()">单击之前</button>
<div id="AlbumList"></div>
</body>
</html>
innerHTML自带了语法检查功能,他会自动把不完整的HTML代码补充完整.运行如下的一个测试代码就可以发现了.
document.getElementById("AlbumList").innerHTML="<table><tr>";
alert(document.getElementById("AlbumList").innerHTML);
他会自动把我的代码里面添加了<tbody>和</tr></table>等标记.神奇!!!所以在网页中,我们经常这样用;
<div id="content"></div>
<script language="javascript">
document.getElementById("content").innerHTML="需显示的内容"；
</script>
这样就会在id 是content的标记那里显示"需显示的内容";