学习使用innerHtml,可以动态的实现一些想要的效果!
<div id = "test">
<span style="color:red">test1</span>
<span style="color:blue">test2</span>
</div>
object.innerHTML
也就是从对象的起始位置到终止位置的全部内容,包括Html标签
显示的结果是：<span style="color:red">test1</span><span style="color:blue">test2</span>
object.innerText
从起始位置到终止位置的内容, 但它去除Html标签
显示的结果是：test1 test2
object.outerHTML
除了包含innerHTML的全部内容外, 还包含对象标签本身。
显示的结果是：<DIV id=test><SPAN style="COLOR: red">test1</SPAN> <SPAN style="COLOR: blue">test2</SPAN> </DIV>
object.outerText
这个显示的结果与innerText没有什么区别(如果有发现不同的朋友告诉我一声,多谢了)
显示的结果是：test1 test2
上面的内容很抽象,看完下面的示例就能明白了
<div id = "test">
<span style="color:red">test1</span>
<span style="color:blue">test2</span>
</div>
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">innerText内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>
<a href="javascript:alert(test.outerText)">outerText内容</a>
另外说明一点的是这个四个属性只有innerHTML是符合W3C的标准的，其他三个只适用于IE浏览器
还有就是要在非IE的浏览器中输出与innerText一样的结果，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
可以使用innerHtml来做一个小例子:
<script type="text/javascript">
var start=0;
function jishi()
{
start++;
di.innerHtml=start;
}
</script>
<font color="#0000FF" size="14">
<div id="d1" align="center">0</div>
</font>
<div align="center">
<input type="button" value="开始计时" onclick="intername=setInterval('jishi()',100)"; />
<input type="button" value="停止计时" onclick="clearInterval(intername)"; />
</div>
今天学习了一点，有句话说的好，每天进步一点点！